如何使用Angular 2过滤select/dropdown的数据？

Question

我想根据下拉列表 selection 显示来自 JSON 数据的不同值。

<div>
    <label for="input-one">select</label>
</div>
<div>
    <select>
        <option value="">--- Select ---</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
    </select>
</div>

这是下拉 select离子。基于 select 离子显示 JSON 数据的最佳方法是什么？

例如：

如果您 select 1，它应该显示来自 JSON 数据的 2 个值。
如果您 select 2，它应该显示来自 JSON 数据的 3 个值。
如果你 select 3，它应该显示所有 JSON 数据。

我想在 Angular 2 中执行此操作。请建议我可能是什么解决方案。

Answer 1

你好_樱酱:)

我不确定我是否完全理解你的问题，但我知道你想显示按 <select> 过滤的项目。如果是这种情况，我建议您使用：

关于事件绑定的简短说明 ********************************** *

基本上使用事件绑定你是这样处理元素事件的：

<select (change)="onMySelectChange($event)"></select>

现在在 onMySelectChange 中，您可以根据 <select>

的值过滤 collection

关于自定义管道的简短说明 ********************************** *

例如，您在外部文件中制作过滤器 - myfilter.ts 然后您需要使用函数 transform(value: any, ...args: any[]) : any.

实现接口 PipeTransform

样品管看起来像：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myfilter'
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {

        if(filter == 1){
          return items.slice(0, 2);
        }else if(filter == 2){
          return items.slice(0, 3);
        }else if(filter == 3){
          return items;
        }else{
          return [];
        }
    }
}

示例用法为：

<ul>
    <li *ngFor="let d of pipeFilterData | myfilter: 2">{{d.value}}</li>
</ul>

不要忘记将管道放入应用模块的声明中：

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App, MyFilterPipe ],
  bootstrap: [ App ]
})

CLICK HERE TO DIG INTO DEMO CODE

如何使用Angular 2过滤select/dropdown的数据？

How to filter data with select/dropdown using Angular 2?

javascript

json

typescript

angular2-forms

angular