小编gun*_*dra的帖子

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

HTML模板:

<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>

物品数组:

export var MODELS: Model[] = [
{ id: 1, 
  name: 'Model 1', 
  image: 'img1', 
  category: 'Cat1', 
},

{ id: 2, 
  name: 'Model 2', 
  image: 'img2', 
  category: 'Cat3',
},

{ id: 3, 
  name: 'Model 3', 
  image: 'img3', 
  category: 'Cat1',
},
{ id: 4, 
  name: 'Model 4', 
  image: 'img4', 
  category: 'Cat4',
},

...
];

此外,下拉列表包含重复的类别名称.它必须只列出唯一的类别(字符串).

我知道创建自定义管道是正确的方法,但我不知道如何编写.

Plunker: …

我正在构建具有 3d 模型列表的 Web 应用程序。我这样做是为了练习目的，以便获得有关 angular 2 的一些初步知识。

每个列出的模型都有名称、主图片、类别和滑块（图像数组）。

模型数据数组为：

export var MODELS: Model[] = [{ 
  id: 1, 
  name: 'Model 1', 
  image: 'app/img/models/model-1.jpg', 
  category: 'Cat 1',
  slides: [
    { alt: 'Model 1 front view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 rear view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 side view' , url: 'app/img/models/model-2.jpg' }
  ]  
},
{ 
  id: 2, 
  name: 'Model 2', 
  image: 'app/img/models/model-2.jpg', 
  category: 'Cat 2',
  slides: [
    { alt: 'Model 2 front view' , …