Angular 10 *ngFor循环如何在第一条消息后停止重复头像div区块

实现方案 #

你可以直接用Angular *ngFor 内置的 first 上下文变量配合 *ngIf 实现需求，仅需两步修改：

1. 修改循环声明，引入首项判断变量
   将原有循环代码 <div *ngFor="let msg of msgs"> 调整为：

<div *ngFor="let msg of msgs; let isFirst = first">

isFirst 为布尔值，只有循环到列表第一条数据时返回 true，其余项均为 false。
2. 给消息区块加条件渲染逻辑，仅首项展示头像
你现有代码里已经写好了带头像的.message区块和纯文本的.message.text-only区块，直接加*ngIf判断对应显示即可，修改后的完整代码如下：

<div *ngFor="let msg of msgs; let isFirst = first">
  <!-- 首条消息展示带头像的卡片 -->
  <div class="message" *ngIf="isFirst">
    <div class="photo" style="background-image: url({{LManager_photo}});">
      <div class="online"></div>
    </div>
    <p class="text"> {{msg.Message}} </p>
  </div>

  <!-- 后续消息展示纯文本卡片 -->
  <div class="message text-only" *ngIf="!isFirst">
    <p class="text"> {{msg.Message}} </p>
  </div>
  <p class="time"> 14h58 </p>
</div>

如果后续你需要实现同发送人连续消息仅展示一次头像的逻辑，只需要把判断条件从isFirst替换为「当前消息发送人ID与上一条消息不一致」即可。

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