Question

编辑：

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

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

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

原始帖子：

我是Angular6的新手，我在一个问题上苦苦挣扎几个小时，在*ngFor中，除了接收者/发送者的用户名，我的所有数据都显示了，即使它们都存在于我的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>

在此先感谢所有花时间阅读/回答我的信息的人。

Answer 1

出于一个晦涩的原因，当我将此ngIf的ng-template标记更改为ng-container时，它起作用了。有人有解释吗？现在可以正常工作了，但是我对这个问题的机制并不十分了解。感谢@Mathias为我提供了正确的方法。

Answer 2

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

使用ng-container的正常方法是

*ngIf ... else

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

2 个答案: