Angular - 为什么要显示的数据存在但未在视图中显示？

Question

编辑：

正如@Mathias在评论中指出的那样，以下*ngIf无效：

(*ngIf="currentUsername == chat.senderUsername else elseBlock1")

但我不明白为什么它不起作用，因为currentUsername和chat.senderUsername都存在，而不是null并且非常相同。我很丢失：/

原始邮寄：

我是Angular6的新手，我在一个问题上挣扎了几个小时，在*ngFor中，除了接收器/发送器的用户名外，我的所有数据都显示出来，即使它们都存在于我的NmChatRequest实体中。

我尝试将ng-template标签放在b标签周围，有或没有?操作符，例如{{chat?.senderUsername}}在视图中，一切都没有用。我在这里迷失了，欢迎任何帮助。

正如您在控制台中看到的那样，所需的数据senderUsername和receiverUsername存在且不为null，请参阅开发人员控制台的屏幕截图：

这是渲染：

我的观点如下：

<ng-container *ngFor="let chat of chats">
        <ion-item (click)="goToChat(chat?.id)">
          <ion-avatar item-start>
            <img *ngIf="currentImageUrl == chat.senderImageUrl else elseBlock" src="{{chat?.receiverImageUrl}}">
            <ng-template #elseBlock>
              <img src="{{chat?.senderImageUrl}}">
            </ng-template>
          </ion-avatar>
          <h2>
            <ng-template *ngIf="currentUsername == chat.senderUsername else elseBlock1">
              <ng-template *ngIf="chat?.senderRead == false else elseBlock2">
                <b>{{chat.receiverUsername}}</b>
              </ng-template>
              <ng-template #elseBlock2>{{chat.receiverUsername}}</ng-template>
            </ng-template>
            <ng-template #elseBlock1>
              <ng-template *ngIf="chat?.receiverRead == false else elseBlock3">
                <b>{{chat.senderUsername}}</b>
              </ng-template>
              <ng-template #elseBlock3>{{chat.senderUsername}}</ng-template>
            </ng-template>
          </h2>
          <p>{{chat?.lastMessage}}</p>
        </ion-item>
    </ng-container>

提前感谢任何花时间阅读/回复我的帖子的人。

Answer 1

ng-template应该用作模板引用而不是容器。您将代码放入其中，然后通过引用模板将其显示在其他位置（如else的*ngIf中）。如果您只想应用*ngIf等指令而不将元素包装在<div *ngIf="...">中，则必须使用ng-container。

使用*ngIf ... else的正常方法是

<ng-container *ngIf="condition; else temp>Stuff</ng-container>
<ng-template #temp>This doesn't get rendered on its own, only if referenced</ng-template>

Answer 2

出于一个不明原因，当我将这个ngIf的ng-template标签改为ng-container时，它起作用了。有人有解释吗？现在它正在工作，但我真的不了解这个问题下的机制。感谢@Mathias让我以正确的方式。