以角度循环组件

【问题标题】：Looping through components in angular以角度循环组件
【发布时间】：2021-02-05 07:18:00
【问题描述】：

我在 display:flex div 容器中有多个角度组件。我从 API 接收数据表，它的行数与组件数一样多。每行都是组件的数据。组件具有对应于数据行的@Input。我想要一个循环来执行这个伪代码：

For i=0 to container.children.count-1{
    cast(container.children[i] as mycomponent).Input=datatable.row[i]
}

【问题讨论】：

【解决方案1】：

你可以用#标记你的孩子并用@ViewChildren注解得到它

HTML：

<child #ChildRef></child>
<child #ChildRef></child>
<child #ChildRef></child>

TS：

@ViewChildren('childRef') childRefs;
getChilds = () => {
  return this.childRefs.toArray();
}

另一种方法，更清洁/事件驱动：

您还可以创建一个服务，注入父级和子组件，组件订阅服务，你可以通知孩子更新他们的值，父母发出更新事件。

NgModel 方式：

使用 TwoWayDataBinding [(ngModel)]="ObjectRef"

【讨论】：