Angular2 chained select

Question

複数の選択肢を連鎖させて、前の選択が現在の選択のフィルタを提供するようにする必要があります。 （たとえば、選択1の値は、選択2のパイプフィルタの値などを提供します）。

誰かがこの実例を持っていますか？パイプ、入力、出力、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に2つの問題を抱えています。

• 最初の問題は、セカンドセレクタに未定義を渡しています。 firstは変更時にのみ設定するため、初期値は未定義です。あなたのコンポーネントを壊していた*ngIfをsecond-selectorに追加するか、変数firstを初期値で初期化することができます。例えばparent1。
  があなたのplunkerでこれを解決するために、私はselectにあなたがSecondSelectorPipeに引数を期待している間、親オブジェクトe.g. parent1ではなく、実際の親オブジェクトを表す文字列値を放出している、second-selector
• 第二の問題で* ngIfを追加しました文字列ではなく親オブジェクトになります。
  プロパティを<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

しかし、あなただけのような単純なタスクのためのパイプを使用している場合、あなたはvalues変数をsecond-selectorに置き換えることで置き換えることができます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