javascript - 带下拉的 Angular 过滤

我有以下代码:
HTML:

<select>
  <option *ngFor="let item of items">{{item}}</option>
</select>

一些Angular服务:

items = [
{name: "item1", type: "type1"},
{name: "item2", type: "type2"},
{name: "item3", type: "type2"}

];
还有一些过滤功能，可以按类型过滤数组并返回新数组。
我没有按按钮过滤的问题，例如:

<button type="button" (click)="Filter('type2')"></button>

但是我无法使用下拉菜单来实现。
UPD:错误的解释。 Here现场演示。需要使用brandName在select标签处使用(change)事件过滤数组

最佳答案

设置ngModel以获取所选值，设置change事件以更新列表:

<select [(ngModel)]="selectedBrand" (change)="valueSelected()">
  <option *ngFor="let item of brandName">{{ item }}</option>
</select>

然后在值更改后过滤组件中的项目:

public selectedBrand;
public valueSelected() {
    this.goods = this.goodsService.goods.filter(item => item.name === this.selectedBrand);
}

Demo