如何使用Angular 2使用选择下拉列表过滤数据？

擎天柱

我想根据使用角度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然后将选择值传递给与对象匹配的函数。

范例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>

示例component.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)
}

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。