Angular2 链式选择答案

【问题标题】：Angular2 chained selectsAngular2 链式选择
【发布时间】：2016-03-23 19:46:55
【问题描述】：

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

【问题讨论】：

标签： angular components pipes-filters

【解决方案1】：

你的 plunker 有两个问题。

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

Here is a working plunker

【讨论】：

我正在使用管道，因为我在多个地方重复使用它。非常感谢你帮我解决这个问题......你已经为我打开了一个开关，希望 :)
我想补充一点，Angular 团队现在添加了 [ngValue] 来捕获对象，而 [value] 仍然用于单一类型属性。