角2 QueryListのは、私が持つコンポーネントを持っている

Question

を見つける

ngAfterViewInit() { 
    let field1 = this.factories.find(factory => factory.meta.id == 'field1'); 
    console.log(field1);  
} 

MyDirective {vcRef: ViewContainerRef_, loader: MyLoaderService, meta: Object}

しかし、私がアクセスしようとすると、 field1のプロパティ：

ngAfterViewInit() { 
    let field1 = this.factories.find(factory => factory.meta.id == 'field1'); 
    console.log(field1.property);  
} 

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'property' of undefined

UPDATE：

私が思う問題は、ダイナミックなフォーム作成の存在。 Hereはプランナーです。 app.tsに私は上記のコードを持っています。

Answer 1

それは魔法のように動作：

var __id = 0; 

@Directive({ selector: '[mydirective]' }) 
export class MyDirective { 
    public uId = ++__id; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2 mydirective>Hello {{name}}</h2> 
     <h2 mydirective>Hello {{name}}</h2> 
     <h2 mydirective>Hello {{name}}</h2> 
     <h2 mydirective>Hello {{name}}</h2> 
     <h2 mydirective>Hello {{name}}</h2> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    @ViewChildren(MyDirective) factories: QueryList<MyDirective>; 

    constructor() { this.name = 'Angular2' } 

    ngAfterViewInit() { 
    console.log(this.factories); 
    let field1 = this.factories.find(f => f && f.uId == 1); 
    console.log(field1); 
    if (!field1) return; 
    console.log(field1.uId); 
    } 
} 

は私の作業のデモ：https://plnkr.co/edit/gCxYCnCd6Wdm0de4REXp?p=preview

たぶん、あなたが証明するplunkerを作成することができますか？

本当にディレクティブが見つかった場合は、追加のチェックを追加してください。ここで

UPDATE

は、あなたの修正plunkerです：https://plnkr.co/edit/CRjONEtMAe085btR5oGi?p=preview

ngAfterViewInit() { 
    let checkbox = this.factories.find(f => f.model.type == 'checkbox'); // use .model 
    console.log(checkbox.model.data); // use .model 

    // seems like we need some time here to dynamicly create components .. 
    console.log('without delay', this.factories.filter(f => !f.componentRef).length); 
    setTimeout(() => console.log('with delay', this.factories.filter(f => !f.componentRef).length), 100); 
}