我有一个包含金额、日期、发票编号、状态等的发票列表。我创建了一个包含状态的下拉列表。如果我在下拉列表中选择状态,我需要过滤表格并仅显示包含所选状态的行。
我正在研究 angular 4。我尝试了以下代码,但它不起作用。
在 HTML 页面中:
<select [(ngModel)]="selected" name="status" placeholder="select" (ngModelChange)="onOptionsSelected($event)">
<option *ngFor="let sta of status" [ngValue]="sta">{{sta}}</option>
</select>
在 Component.ts 页面中:
selected:any;
stat = [
{ value: "All", id: "123" },
{ value: "Unpaid and sent", id:"12" },
{ value: "Unpaid and sent",id:"23" },
{ value: "Unpaid and not sent" ,id:"45"},
{ value: "Unpaid with due date",id:"56" },
{ value: "Paid",id:"57" },
{ value: "Open",id:"78" },
{ value: "Overdue" ,id:"45"}];
status = ['Select Status', 'All', 'Unpaid and sent', 'Unpaid with due date', 'Paid', 'Open', 'Overdue'];
constructor() {
this.selected = this.stat;
}
onOptionsSelected(event) {
let value = event.target.value;
console.log(this.selected);
}
谁能帮帮我?谢谢
最佳答案
上面的问题是你将数组设置为选中,只需删除构造函数中的那一行,
constructor() {
this.selected = this.stat; //Not necessary
}
并且,您可以将 array.filter
与 ngModel selected
onOptionsSelected() {
console.log(this.selected);
this.filtered = this.stat.filter(t=>t.value ==this.selected);
}
关于html - 基于 Angular 4的下拉列表进行过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50479008/