javascript - 带下拉菜单的 Angular 过滤

Question

我有以下代码:

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 在选择标签处使用(更改)事件过滤数组

Answer 1

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