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个符合您条件的项目，并且仅显示不符合其条件的第一个项目。

Answer 2

app.component.ts

userNamePrintInElse =""
constructor(private socketService : SocketserviceService) { 
  this.socketService.newMessageReceived().subscribe((data) => {
    this.messageArray.push(data);userids
    this.userNamePrintInElse = this.messageArray.filter(data => data.userid != this.userids )[0].username
  });
};

以HTML格式

<div *ngFor="let item of messageArray; let index = index">
  <div *ngIf="userids == item.userid">{{item.username}}</div>
</div>
  <div >{{userNamePrintInElse}}</div>

Answer 3

* ngIf和* ngFor伪指令主要用于显示。如果您想提供任何逻辑，则应避免在模板内部进行。

将数组拆分到组件内部，然后通过组件内部的两个不同指令将其显示。

public otherElement: any = _.first(messageArray)
public filteredArray: any[] = _.filter(messageArray, item => item.id != otherElement.id)

您将已经设置了“ otherElement”和“ filteredArray”。然后，您可以像这样显示它们：

<div *ngFor="let item of filteredArray; let index = index">
  <ng-container>
    <div>{{item.username}}</div>
  </ng-container>
</div>
<ng-template #other_content>{{otherElement.username}}</ng-template>

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

3 个答案: