Angular

Question

编辑：

正如@Mathias 在评论中指出的那样，以下 *ngIf 不起作用：

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

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

原版POST:

我是 Angular6 的新手，我在一个问题上苦苦挣扎了几个小时，在 *ngFor 中，除了 receiver/sender 的用户名外，我的所有数据都显示了，即使它们是两者都出现在我的 NmChatRequest 实体中。

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

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

效果图如下：

我的看法如下：

<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>

提前感谢任何愿意花时间来 read/answer 我的 post 的人。

Answer 1

出于不明原因，当我将此 ngIf 的 ng-template 标记更改为 ng-container 时，它起作用了。有人有解释吗？现在它正在工作，但我不太了解这个问题下的机制。感谢@Mathias 让我走上了正确的道路。

Answer 2

ng-template 应该用作模板引用而不是容器。您将代码放入其中，然后通过引用模板将其显示在其他地方（例如在 *ngIf 的 else 中）。如果您只想应用 *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>

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

Angular - Why the data I want to display is present but not displayed in view?

ngfor

angular6