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

Question

我想根据下拉选项显示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>

这是下拉选择.根据选择显示JSON数据的最佳方法是什么？

例如:

• 如果选择1,它应该显示来自JSON数据的2个值.
• 如果选择2,则应显示JSON数据中的3个值.
• 如果选择3,则应显示所有JSON数据.

我想在Angular 2中这样做.请建议我可能是什么解决方案.

Answer 1

你好,樱花陈:)

我不确定我是否完全理解您的问题,但我确实理解您要显示过滤的项目<select>.如果是这种情况,我可以建议你使用:

• 事件绑定
• 定制管道

关于事件约束的简短说明********************************

基本上使用Event绑定,您将处理元素事件,如下所示:

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

现在在onMySelectChange中,你可以根据的值过滤你的集合<select>

关于定制管道的简短说明********************************

在这里,你让你的过滤器,例如外部文件- myfilter.ts 然后你需要实现接口PipeTransform与功能transform(value: any, ...args: any[]) : any.

样品管道看起来像:

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>

不要忘记将管道放入app模块的声明中:

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

点击这里进入DEMO CODE