动态加载组件后如何让angular2更新内容

Question

我有angular2最终版本。 已经创建了一个组件

  @Component({
    selector:'artists',
    template: `
      <h2>Artists Information</h2>
      <ul [style.display]="artists?.length>0 ? 'block':'none'">
        <li ngfor="a in artists">Name: {{a?.name}} - Followers:  {{a?.folloers.total}}</li>
      </ul>
       `
  })
  export class Artists{
    @Input("list")
    private artists:any;
  }

在以后的某个地方，我尝试动态加载组件

  @ViewChild('divBody', {read: ViewContainerRef}) private body: ViewContainerRef;

  this.body.clear();
  let factory = this.resolver.resolveComponentFactory(Artists);
  let injector = ReflectiveInjector.fromResolvedProviders([], this.body.parentInjector);   
  let b= this.body.createComponent(factory,0,injector,[]);

  // data is comming from an ajax call to a remote location.
  b.instance.artists = data.artists.items;
  b.changeDetectorRef.detectChanges();

我的问题是，“艺术家”视图未更新，并且显示空白列表行而不是艺术家列表。

问题是我想念什么？ 为什么即使在我调用detectChanges（）之后，模板也不用数据更新？

Answer 1

<li ngfor="a in artists"

应该

<li *ngFor="let a of artists"

如果您在artists没有null元素，则不需要? 在{{a?.name}} （在*ngFor ）