Question

我正在从后端数据创建组件列表。我正在创建一个ContentChild对象来获取它们的引用，但它中没有数据。我也试过ViewChild，但我只得到第一个。

有不同的解决方案，但没有一个正在发挥作用。出于这个原因，我认为这是因为子组件是在创建类之后创建的（我可能是错的）。

这是我到目前为止所做的：

table.component.ts

export class tableComponent {
  @ContentChildren('relation') relationElements: QueryList<RelationElement>;
}
  colapseColumn(){
    this.table.resetChildElements();
    console.log(this.relationElements);

  }

table.component.html

<ng-container *ngFor="let entity of table.tableEntity">
    <tr class="listTable--bodyRow" >
        <td class="listTable--bodyElement"
            *ngFor="let element of entity.printableElements">
            <container-relation
                #relation
                [element]="element"
                (collapseColumn)="colapseColumn();">
            </container-relation>
       </td
   </tr>
</ng-container>

更新

我尝试过ViewChildren：

@ViewChildren('relation') relationElements: QueryList<any[]>;

打印relationElements时，我得到以下结果：

QueryList {_dirty: false, _results: Array(0), _emitter: EventEmitter

预期结果应该允许我做类似的事情：

this.relationElements.map(re => re.extended = false);

Answer 1

Observable类上有changes QueryList个属性，您可以订阅它以在添加或删除组件时收到通知。您还应该使用@ViewChildren()代替@ContentChildren()，因为模板中显然没有ng-content。

@ViewChildren('relation')
relationElements: QueryList<RelationElement>;

ngAfterViewInit(){
  this.relationElements.changes
    .startWith(this.relationElements).subscribe(()=>{
      console.log(this.relationElements);
      // do stuff when list updates
    });
}

Working plnkr

所有孩子的ContentChildren

1 个答案: