在 NgFor 循环中使用 NgIf答案

【问题标题】：In NgFor cycle with NgIf在 NgFor 循环中使用 NgIf
【发布时间】：2019-03-06 02:33:57
【问题描述】：

我正在做 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

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

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

【问题讨论】：

标签： angular angular-template

【解决方案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 个结构指令。因此，您需要将模板“扩展”到上面。

【讨论】：

谢谢，这是工作 :-) 你能帮我解释一下我的问题吗？当我在一个球员中选择并发送到数据库（我使用 MongoDB）时，我只看到这个：{守门员：“[Object：object]”}但是当我添加到数据库文本时，一切都很好。我要修理什么？

【解决方案2】：

Jota 建议的方法非常可靠。

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

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

然后你可以迭代它们?

【讨论】：

显然，将逻辑排除在模板之外的更好方法。但要小心执行密集任务的 getter，因为它们在每个 CD 循环中都会被调用，所以在设置 players 时更好地过滤 players 数组。
谢谢，这是工作:-) 你能帮我解释一下我的问题吗？当我在一个球员中选择并发送到数据库（我使用 MongoDB）时，我只看到这个：{守门员：“[Object：object]”}但是当我添加到数据库文本时，一切都很好。我要修理什么？
@Ali 我认为如果您问另一个包含所有详细信息的问题会更好，您可以添加该问题的链接作为参考:)
是的，我已经在这里做了：stackoverflow.com/questions/55010771/…。谢谢