如何只执行一次else条件的*ngIf-else？

Question

我使用 *ngFor 遍历 div 中的数组。在这个 div 中有另一个带有 *ngIf else 条件的 div，其中 else 条件匹配 25 个值。

我的查询是我只想打印第一个值而不是 25 个值，而其他 24 个值应该隐藏或忽略。请注意，与 if 语句匹配的其他 25 个值都应该是可见的。怎么可能？

<div *ngFor="let item of messageArray; let index = index">
  <div *ngIf="userids == item.userid;else other_content">{{item.username}}</div>
  <ng-template #other_content>{{item.username}}</ng-template>
</div>

app.component.ts

constructor(private socketService : SocketserviceService) { 
  this.socketService.newMessageReceived().subscribe((data) => {
    this.messageArray = data.payload;
  });
};

Answer 1

您可以通过first操作符利用循环本身：

<div *ngFor="let item of messageArray; let index = index; first as isFirst">
  <div *ngIf="isFirst>{{item.username}}</div>
</div>

编辑

现在我已经理解了你的问题：你不能只在模板中做你想做的事。

为了实现你想要的，你将被迫创建两个 getter ：一个用于尊重条件的消息，一个用于其他。

get messagesWithIdMatch() {
  return this.messageArray.filter(item => item.userid === this.userids);
}

getFirstMessageWithoutIdMatch {
  return this.messageArray.filter(item => item.userid !== this.userids)[0];
}

现在你的 HTML 变成了这样：

<div *ngFor="let item of messagesWithIdMatch">
  <div>{{item.username}}</div>
</div>
<div>
  <div>
    {{ getFirstMessageWithoutIdMatch.username }}
  </div>
</div>

这将显示与您的条件匹配的 25 个项目，并且将仅显示不匹配的第一个项目。