ngFor 匹配键值答案

【问题标题】：ngFor matching key ValuengFor 匹配键值
【发布时间】：2018-10-30 18:39:27
【问题描述】：

在angular 6中，使用ngFor，是否可以匹配键值并打印什么时候比赛？

下面是我的 JSON，我想匹配 SportName 并打印 Name 以匹配记录

例如，我想检查 sportName = "shooting Indoor" 并仅打印 Name="Ian"。休息应该被忽略。

[{
  "SportName": "football Outdoor",
  "Name": "Ami",
}, {
  "SportName": "shooting Indoor",
  "Name": "Ian",
}, {
  "SportName": "hockey Outdoor",
  "Name": "Jeo",
}];

【问题讨论】：

标签： angular

【解决方案1】：

使用这样的代码（我从头开始写） - 我假设你的数组在this.list

<div *ngFor="let item of list">
    <div *ngIf="item.SportName =='shooting Indoor' ">
        {{ item.Name }}
    </div>
</dvi>

如果您不想生成<div> 节点，请改用<ng-container>。

【讨论】：

【解决方案2】：

考虑到您的组件中有sports：

...
sports = [
  { "SportName": "football Outdoor", "Name": "Ami" },
  { "SportName": "shooting Indoor", "Name": "Ian" },
  { "SportName": "hockey Outdoor", "Name": "Jeo" }
];
...

使用 ng-container 以及 *ngFor 和 *ngIf 并检查 *ngIf

<div *ngFor="let sport of sports">
    <ng-container *ngIf="sport.SportName === 'shooting Indoor' && sport.Name='Ian'">
        {{ sport.Name }}
    </ng-container>
</div>

或

你可以使用[ngStyle]：

<div 
  *ngFor="let sport of sports" 
  [ngStyle]="{ display : (sport.SportName === 'shooting Indoor' && sport.Name='Ian') ? 'block': 'none' }">
  {{ sport.Name }}
</div>

【讨论】：

这比使用 div 更好。 ng-container 隔离 html 中使用的变量。