Angular2链式选择

Question

我需要能够将多个选择链接在一起，以便前面的选择为当前选择提供过滤器，依此类推。 （例如，选择1的值提供选择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

您的矮子有两个问题。

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

更改的选项元素：

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

管道上更改的线：

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

这是您的朋克工作

但是，如果仅将管道用于如此简单的任务，即IMHO，则可以通过使用getter替换second-selector的values变量并过滤返回的列表来替换它。

例：

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
    }
}

这是一个工作的家伙