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在select标签处通过（更改）事件过滤数组

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

Answer 2

尝试一下

AppComponent.ts文件

export class AppComponent{

    constructor(){}
    items = [
        {name: "item1", type: "type1"},
        {name: "item2", type: "type2"},
        {name: "item3", type: "type2"}
    ];

makeArr(e){
    console.log(e);
}

}

html

<select (change)='makeArr($event.target.value)'>
    <option *ngFor="let item of items">{{item.name}}</option>
</select>

在显示对象的值时遇到问题。使用.检索对象的值，也可以使用[]

带下拉菜单的角度过滤

2 个答案: