Angular 2 QueryList的查找

Question

I have a component with:

@ViewChildren(MyDirective) factories: QueryList<MyDirective>;

when I want to find an element in the QueryList it is working:

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

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

But when I try to access a property of 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

The problem I think exists because of dynamic form creation. Here is a plunker. In app.ts I have the code above.

Answer 1

It works like a charm:

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

my working demo: https://plnkr.co/edit/gCxYCnCd6Wdm0de4REXp?p=preview

Maybe you could create a plunker to demonstrate?

Or add some additional checks if really a directive was found?!

UPDATE

Here is your modified 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);
}