Question

我需要通过更改下拉列表中的类别来过滤Dagger 2循环中的项目。因此，当从列表中选择特定类别时，它应仅列出包含相同类别的项目。

HTML模板：

ngFor

项目数组：

<select>
  <option *ngFor="let model of models">{{model.category}}</option>
</select>

<ul class="models">
  <li *ngFor="let model of models" (click)="gotoDetail(model)">
  <img [src]="model.image"/>
  {{model.name}},{{model.category}}
  </li>
</ul>

此外，下拉列表包含重复的类别名称。它必须只列出唯一的类别（字符串）。

我知道创建自定义管道是正确的方法，但我不知道怎么写。

Plunker：http://plnkr.co/edit/tpl:2GZg5pLaPWKrsD2JRted?p=preview

Answer 1

这是一个示例管道：

<li *ngFor="let model; of models | matchesCategory:model.category" (click)="gotoDetail(model)">

使用它：

selectedCategory: string;

=====对于plunkr示例====

您需要选择更改以反映某些变量

首先在你的班级中定义一个成员：

<select (change)="selectedCategory = $event.target.value">
   <option *ngFor="let model of models ">{{model.category}}</option>
</select>

然后更新您的模板：

  <li *ngFor="let model; of models | matchesCategory:selectedCategory" (click)="gotoDetail(model)">

最后，使用管道：

getModels(): Promise<Model[]> {
  return Promise.resolve(MODELS);
}

====看到羽毛球后的评论====

我注意到你使用了诺言。 Angular2更倾向于rxjs。所以我改变的第一件事就是服务，替换：

getModels(): Observable<Array<Model>> {
  return Promise.resolve(MODELS);
}

到：

getModels(id: number): Observable<Model> {
  return getModels().map(models => models.find(model.id === id);
}

和

ModelsComponent

然后在models$: Observable<Array<Model>> = svc.getModels(); uniqueCategories$: Observable<Array<Model>> = this.models$ .map(models => models.map(model => model.category) .map(categories => Array.from(new Set(categories)));

中

     <option *ngFor="let category; of uniqueCategories$ | async">{{model.category}}</option>

您的选择将成为：

      <li *ngFor="let model; of models$ | async | matchesCategory:selectedCategory" (click)="gotoDetail(model)">

和你的清单：

Array.from(new Set(...))

这是一个非常通风的解决方案，因为您有许多重复项并且您一直在查询服务。以此为起点，仅查询服务一次，然后从您得到的结果中获取特定值。

如果您想保留代码，只需实现UniqueValuesPipe，其转换将获得一个参数并对其进行过滤，以使用{{1}}返回唯一类别。您首先需要将其映射到字符串（类别）。

如何基于对象属性字符串过滤“ngFor”循环内的项目

1 个答案: