Angular2 链式选择

Question

我需要能够将多个 select 链接在一起，以便前面的 select 为当前的 select 提供过滤器，依此类推。（例如 Select 1 的值为 Select 2 等的管道过滤器提供了值。

有人有这方面的工作示例吗？浏览 Pipes、Input、Output 和 EventEmitter 的各种示例似乎没有给我足够的洞察力，但我可能想多了。

import {Pipe} from 'angular2/core';

@Pipe({
  name:'secondSelector'
})
export class SecondSelectorPipe{
  transform(value,[parent]){
    return value.filter((item)=>item.parent === parent.code);
  }
}

这显示了我正在尝试做的事情...... http://plnkr.co/edit/HQFVts77PrOrWxZWnPSA?p=preview

Answer 1

你的 plunker 有两个问题。

第一期，您将 undefined 传递给 second-selector。 first 是未定义的初始值，因为您只在更改时设置它。这破坏了你的组件。您可以将 *ngIf 添加到 second-selector 或使用初始值初始化变量 first。例如parent1.
为了解决这个问题，我在 second-selector
第二期，在 select 上，您发出的字符串值表示 parent object e.g. parent1 但不是实际的 parent object 在 SecondSelectorPipe 上时，您期望参数是 parent object 而不是字符串。
为了解决这个问题，我在 first-selector 上将 code 属性分配给 <option> 并且我更改了 SecondSelectorPipe 以期望字符串代码为parent object。

更改的选项元素：

<option *ngFor="#val of values" [value]="val.code">{{val.title}}</option>

管道上的更改线：

return value.filter((item)=>item.parent === parent);

Here is your plunker working

但是，如果您只是将管道用于如此简单的任务，恕我直言，您可以通过将 second-selector 中的 values 变量替换为 getter 并过滤返回的列表。

示例：

export class SecondSelector{
  @Output() select = new EventEmitter();
  @Input() parent;

  valuesList:ValueModel[] = [
      new ValueModel("ValueCode6","Child1","ValueCode1"),
      new ValueModel("ValueCode7","Child2","ValueCode1"),
      new ValueModel("ValueCode8","Child3","ValueCode2"),
      new ValueModel("ValueCode9","Child4","ValueCode3"),
      new ValueModel("ValueCode10","Child5","ValueCode3"),
      new ValueModel("ValueCode11","Child6","ValueCode4"),
      new ValueModel("ValueCode12","Child7","ValueCode5"),
      new ValueModel("ValueCode13","Child8","ValueCode5"),
      new ValueModel("ValueCode14","Child9","ValueCode5"),
      new ValueModel("ValueCode15","Child10","ValueCode5"),
    ];

    get values(){
        return this.parent ?
          this.valuesList.filter(item=> item.parent === this.parent):
          [];  // to avoid errors, if parent is undefined, return empty list
    }
}

Here is a working plunker

Angular2 链式选择

Angular2 chained selects

components

pipes-filters

angular