Question

我需要能够将多个选择链接在一起，以便前面的选择为当前选择提供过滤器，依此类推。（例如，选择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传递给第二选择器。 first初始化未定义，因为您只将其设置为更改。这打破了你的组件。您可以将*ngIf添加到second-selector或使用初始值初始化变量first。例如parent1。
为了解决这个问题，我在second-selector
第二个问题，在select上，您发出的字符串值表示父对象e.g. parent1但不是实际的父对象，而在 SecondSelectorPipe 上，您希望参数为父对象不是字符串。
为了解决这个问题，我在code上将<option>属性分配给first-selector，并更改了 SecondSelectorPipe 以期望父对象的字符串代码。

更改的选项元素：

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

管道上更改的行：

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

Here is your plunker working

但是，如果你只是使用管道进行如此简单的任务，这是一个过度的恕我直言，你可以用一个getter替换values中的second-selector变量并过滤返回的列表来替换它

示例：

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链式选择

1 个答案: