Question

var cities = [{id: 1, name: "London"}, {id:2, name="manchester"}]
var areas = [{name="Buckingham palace", cityId: 1}, {name:"Wembley", cityId:1}, {name:"Media City", cityId: 2}, {name:"Old Trafford", cityId:2}]

如何使列表显示如下：

London

Buckingham palace

Wembley

Manchester

Media City

Old Trafford

到目前为止，我有：

<ion-list>
    <ion-item *ngFor="let category of categories">
     {{category.name}}
    </ion-item>
    <ion-list>
        <ion-item *ngFor="let area of areas"> ### HERE: Where  area.id == category.id
            {{area.name}}
        </ion-item>
   </ion-list>
</ion-list>

我似乎陷入了与项目相匹配的问题，研究显示没有真正明确的方法来做到这一点。将数据展平并不好，因为稍后会附加其他项目。

有关id匹配的嵌套循环的任何想法或最佳做法吗？

Answer 1

感谢@Arpit提出的建议我使用最新的angular2（7-aug-16）进行了以下操作：

import { Injectable, Pipe } from '@angular/core';
@Pipe({    
  name: 'whereCatId',
  pure: false
})
@Injectable()
export class WhereCatId {
  transform(cities: any, catId: any){
     let matched = [];
 cities.forEach((city) => {
     if(city.category.id == catId){
        matched.push(city);    
     }
});  
return matched;
  }
}

然后在我的页面中添加了对管道文件的引用并将其包含在@Component

中

并称之为

        <ion-item *ngFor="let area of areas | whereCatId:place.id">

angular2连接数组和过滤

1 个答案: