Question

我正在做角度测试，从后端我有数据。数据如下：

{
 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>

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

Answer 2

Jota建议的方法非常扎实。

另一种方法是在已经拥有守门员的组件类中创建一个属性。

get goalkeepers() {
    return this.players.filter(p => p.position === 'Goalkeeper');
}

然后您可以遍历它们

在NgFor循环中使用NgIf

2 个答案: