angular - 在 NgFor 循环中与 NgIf

Question

我正在做 Angular 分析，从后端我有数据。数据看起来像:

{
 name: 'Name',
 surename: 'Surename',
 position: 'Goalkeeper'
},
{
 name: 'Name',
 surename: 'Surename',
 position: 'Defender'
}

在 HTML 中我有:

<mat-option *ngFor="let player of players" [value]="player">
  <div *ngIf="player.position === 'Goalkeeper'">
             {{player.name}} {{player.surename}} ({{player.price}}M)
  </div>
</mat-option>

但结果是，我在没有处于 ngIf 状态的玩家之后获得了可用空间 ...实际上，看起来像:

Image of mat-option in web

我添加线条以更好地查看图像上的可用空间。

我应该修复什么以删除可用空间？谢谢

Answer 1

mat-option 独立于播放器呈现，只有它的内容发生变化。

重构如下:

<ng-container *ngFor="let player of players">
  <mat-option *ngIf="player.position === 'Goalkeeper'" [value]="player">
    {{player.name}} {{player.surename}} ({{player.price}}M)
  </mat-option>
</ng-container>

完美的解决方案是在 mat-option 中使用 ngFor 和 ngIf，但不可能在上面应用 2 个结构指令相同的元素。因此，您需要将模板“扩展”到上面。