Angular 5绑定到数组

Question

我有一组Angular模板驱动形式的国家/地区

"countries" : [  
   {  
      "id":1,
      "code":"NL"
   },
   {  
      "id":2,
      "code":"US"
   }
]

我在模型中有一个选定的ID：2

我想在div中绑定值“US”。像这样：

<div>{{countries[id==model.countryId].code}}</div>

这可能是角5吗？我在网上看到，数组的过滤管不再存在角度。

我让它像这样工作，但这不是很好我会说：

<ng-container *ngFor="let country of countries">
   <div *ngIf="country.id==parentModel.countryId">{{country.code}}</div>
</ng-container>

Answer 1

你可以在打字稿中创建一个getter属性并像这样使用它：

TS：

get CountryCode() {
    let country = this.countries.find(x=>x.id == this.parentModel.countryId);
    return country && country.code;
}

HTML

<div>{{ CountryCode }}</div>

Answer 2

ngx-pipes （https://github.com/danrevah/ngx-pipes）有一些有趣的管道，例如filterBy，您可以这样使用：

{{ countries | filterBy: ['id']: yourID }}

返回您指定ID的国家/地区。它还有适用于各种情况的管道