Angular中使用ngIf遇错误，如何结合*ngFor实现条件渲染？

你遇到的问题主要来自两个方面：Angular不允许在同一个DOM元素上使用多个结构指令（*ngFor和*ngIf都属于结构指令），以及代码里的语法小错误。我给你整理了正确的实现方式：

错误点分析 #

1. 结构指令冲突：*ngFor和*ngIf不能直接写在同一个<div>上，因为每个结构指令都会修改DOM结构，多个指令共存会导致Angular解析错误。
2. 语法错误：你的ngIf缺少了星号*，而且字符串'User没有闭合单引号，应该写成'User'。另外推荐使用严格相等运算符===来做判断，避免类型隐式转换问题。

正确实现方式 #

最常用的方案是用<ng-container>来承载*ngFor，因为<ng-container>不会被渲染成真实的DOM元素，专门用来包裹结构指令逻辑，然后在内部的元素上使用*ngIf做条件判断：

<ng-container *ngFor="let msg of msgs">
  <!-- 只显示who为"User"的消息 -->
  <div class="UserWrapper" *ngIf="msg.who === 'User'">
    <div class=""></div>
    <div class="speech-bubble1 z-depth-5">
      <p>{{msg.msg}}</p>
      <p class="timeRight">{{msg.time}}</p>
    </div>
  </div>
</ng-container>

如果你的需求是同时显示Bot和User的消息，只是要区分样式，也可以在同一个<ng-container>里写两个带不同条件的<div>：

<ng-container *ngFor="let msg of msgs">
  <!-- User的消息 -->
  <div class="UserWrapper" *ngIf="msg.who === 'User'">
    <div class=""></div>
    <div class="speech-bubble1 z-depth-5">
      <p>{{msg.msg}}</p>
      <p class="timeRight">{{msg.time}}</p>
    </div>
  </div>

  <!-- Bot的消息 -->
  <div class="BotWrapper" *ngIf="msg.who === 'Bot'">
    <div class=""></div>
    <div class="speech-bubble2 z-depth-5">
      <p>{{msg.msg}}</p>
      <p class="timeLeft">{{msg.time}}</p>
    </div>
  </div>
</ng-container>

这样就能完美实现遍历消息列表并按条件展示不同角色的消息啦～

内容的提问来源于stack exchange，提问作者alia