2017-02-20 18 views
1

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

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に私は上記のコードを持っています。

答えて

3

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

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); 
} 
+0

私は、あなたが唯一の0.5%を逃した –

+0

おかげで質問を更新しました! ;)私の修正された答えを見てください。 – mxii

+0

私は何とか他の方法で管理しますが、setTimeoutは良い練習ではありません –

関連する問題