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

【问题标题】：How to filter data with select dropdown using Angular 2?如何使用Angular 2通过选择下拉列表过滤数据？
【发布时间】：2017-12-20 00:42:39
【问题描述】：

我想根据使用 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 中执行此操作。请建议我可能的解决方案。

【问题讨论】：

标签： angular angular2-forms angular2-directives

【解决方案1】：

最简单的方法是将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>

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

demo

【讨论】：

抱歉，Nehal 回复晚了，我上面的意思是如果我从下拉列表中选择 ABC，它应该过滤 json 数据并显示匹配 ABC 的列表/记录。
嗨@VishalK，你的意思是这样的吗？ plnkr.co/edit/UD51OA?p=preview
是的，我明白了。但是我不知道你的json数据表是什么样子的。因此，我为您提供了一个示例，说明如何根据“选择”中的选择过滤 json 数组。如果您需要精确的解决方案，请创建一个 plunker，或者您可以分叉我的 plunker 并重新创建确切的场景并分享链接。
一种尼哈尔，但我想要实现的是在表中的列下我有 10 条记录，如 ABC ABC ABC ABC DEF DEF ABC ABC ABC DEF。当我从下拉列表中选择 ABC 时，我应该只看到表中的 ABC 而不是 DEF，反之亦然。我希望你明白了:(
根据你说的，这里有另一个版本plnkr.co/edit/I8Zbd5?p=preview

【解决方案2】：

真正的基本实现将在 select 标签和 onChange 函数上添加双向绑定

<div>
    <label for="input-one">select</label>
</div>
<div>
    <select [{ngModel}]="someProperty" (change)="changeTableContent()">
        <option value="">--- Select ---</option>
        <option value="ABC">ABC</option>
        <option value="def">def</option>
   </select>
</div>

您的属性将具有选定的选项值，然后您可以对表格内容做任何您想做的事情。表格内容过滤器的实现并不是那么容易，所以我最好建议你使用第三方工具。

在onChange函数中，你可以实现一些这样的

public changeTableContent() {
   if(this.someProperty === 'ABC') {
    //Get the json data and add it into the table.
   }
}

不要忘记将 FormsModule 添加到您正在实现此功能的模块中，因为 ngModel 是 FormsModule 的一部分强>.

【讨论】：