我想根据使用 Angular 2 的表格内的下拉选择显示来自 JSON 数据的不同值。
<div>
<label for="input-one">select</label>
</div>
<div>
<select>
<option value="">--- Select ---</option>
<option value="ABC">ABC</option>
<option value="def">def</option>
</select>
</div>
例如:
如果您选择 ABC,它应该显示与表中 JSON 数据中的 ABC 匹配的值。如果您选择 def,它应该显示来自表中 JSON 数据的匹配值。
我想在 Angular 2 中执行此操作。请建议我可能的解决方案。
最佳答案
最简单的方法是将 select
与 ngModel
绑定(bind),并将选择值传递给与对象匹配的函数。
示例 html:
<div>
<select [(ngModel)]="selected" (ngModelChange)="onSelect(selected)">
<option *ngFor="let option of options"
[value]="option">
{{ option }}
</option>
</select>
</div>
<p></p>
<div>Selected Option</div>
<div>{{ selected }}</div>
<table>
<th>Value</th>
<th>id</th>
<tr *ngFor="let x of selectedData">
<td>{{x?.value}}</td>
<td>{{x?.id}}</td>
</tr>
</table>
示例组件.ts:
someData = [{ value: "ABC",id:"123"},
{ value: "ABC",id:"12"},
{ value: "DEF",id:"23"},
{ value: "DEF",id:"1233"},
{ value: "ABC",id:"13"},
{ value: "DEF",id:"1"},
{ value: "DEF",id:"34"},
{ value: "ABC",id:"56"},
{ value: "ABC",id:"13"},
{ value: "DEF",id:"123"},
{ value: "HIJ",id:"113"}]
options =['ABC', 'DEF']
selected;
selectedData;
constructor(){
this.selectedData = this.someData;
}
onSelect(val){
console.log(val);
this.selectedData = this.someData.filter(x => x.value == val)
}
关于angular - 如何使用 Angular 2 通过选择下拉列表过滤数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45111010/