Angular2 zincirleme,

Question

seçimlerini seçer. Birden çok seçimin birbirine zincirlenebilmesi gerekir, böylece önceki seçim, geçerli seçim için filtre sağlar, vb. (ör. 1'in değeri, 2, vb. için boru filtresi için değer sağlar).

Bunun için çalışan bir örneği var mı? Borular, Girdi, Çıktı ve EventEmitter için çeşitli örneklerde yer almak bana yeterince bilgi vermiş gibi görünmüyor, ama muhtemelen bunu düşünüyorum. Bu benim yapmaya çalıştığım şeyin cinsini gösterir

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

Sen plunker iki sorunları var.

• İlk sayıda, ikinci seçicinin için tanımsız geçiyoruz. first baştan tanımsızdır, çünkü bunu yalnızca değiştirmeye ayarlamanız gerekir. Bu senin bileşenini kırıyordu. *ngIf'u second-selector'a ekleyebilir veya first değişkenini başlangıç ​​değeriyle başlatabilirsiniz. Örneğin. Üst_öğe_1.
  senin plunker bu çözmek için, ben select üzerinde size SecondSelectorPipe üzerinde size argüman bekliyoruz ederken üst nesne e.g. parent1 ancak gerçek ana objeyi temsil eden bir dize değeri yayan edilir second-selector
• İkinci konuda * ngIf eklendi Bir ana nesne olmak için bir dize değil.
  Bunu çözmek için, first-selector numaralı code özelliğini <option> olarak atandım ve üst nesnenin bir dize kodunu beklemek için SecondSelectorPipe değiştirdim.

değiştirilen seçenek elemanı:

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

değiştirilen boruya satır:

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

Here is your plunker working

Ama, ancak böyle basit bir görev için boru kullanıyorsanız Bir overkill IMHO olandeğişkenini second-selector değiştirerek değiştirebilirsiniz bir alıcı ile ve iade edilen listeyi filtreleyerek.

Örnek: birkaç yerde bunu yeniden ediyorum çünkü

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