来自嵌套 ngFor 的 Angular ViewChildren，但按父 ngFor 分组答案

【问题标题】：Angular ViewChildren from nested ngFor but group them by parent ngFor来自嵌套 ngFor 的 Angular ViewChildren，但按父 ngFor 分组
【发布时间】：2020-07-20 16:58:25
【问题描述】：

当我嵌套了 ngFor 时，如何按父 ngFor 对子级进行分组？

所以我有这样的事情：

html：

<div *ngFor="let item of firstChildrenGroupData">
   <app-child #firstChildrenGroup [data]="item.data"></app-child>
</div>
<button (click)="doSomethingForGroup(firstGroup)">Click here</button>

<div *ngFor="let item of secondChildrenGroupData">
   <app-child #secondChildrenGroup [data]="item.data"></app-child>
</div>
<button (click)="doSomethingForGroup(secondGroup)">Click here</button>

ts：

@ViewChildren('firstChildrenGroup') firstGroup: QueryList<ChildComponent>;
@ViewChildren('secondChildrenGroup') secondGroup: QueryList<ChildComponent>;


doSomethingForGroup(group: QueryList<ChildComponent>) {
   group.foreach(item => {
      item.doAction();
   })
}

我想实现这一目标

html：

<div *ngFor="let group of ChildrenGroups">
   <div #group>
      <div *ngFor="let item of group.childrenData">
         <app-child #child [data]="item.data"></app-child>
      </div>
      <button (click)="doSomethingForGroup(????)">Click here</button>
   </div>
</div>

这是错误的，因为如果我在按钮中使用它，现在将对所有孩子采取行动，但我只想对每个按钮的一组孩子采取行动。

@ViewChildren('child') allChildren: QueryList<ChildComponent>

@编辑：也许我可以做一些类似于另一个组件 <app-parent></app-parent> 的事情，它将获取组数据，然后在这个 ngFor 和 <app-child></appChild> 中，但我想避免在中间创建另一个组件来进行分组。

【问题讨论】：

请尝试解释一下：您尝试实现的目标在视觉上应该如何？
child 就像一张卡片，我将这些卡片分组。有组标题，然后是卡片列表，下面是按钮。每个组都有按钮。例如，组可以在上下之间留出一些边距，或者只是
.

标签： angular viewchildren

【解决方案1】：

你可以在做某事之前“过滤”查询列表，如果我认为你的 item.data 是一个属性“groupId”

    <button (click)="doSomethingForGroup(group.groupId)">Click here</button>

doSomethingForGroup(groupId)
{
   this.secondGroup.filter((item:any)=>item.data.groupId==groupId)
                   .forEach(item=>{
                       ...do domething...
                   })
}

如果没有属性 groupId，则可以作为参数 group.childrenData 传递

<button (click)="doSomethingForGroup(group.childrenData)">Click here</button>

并使用一些类似

doSomethingForGroup(childrenData)
{
   this.secondGroup.filter((item:any)=>childrenData.find(d=>d==x.item.data))
                   .forEach(item=>{
                       ...do domething...
                   })
}

注意：我不检查代码，仅供参考

【讨论】：

【解决方案2】：

我会考虑制作

<div *ngFor="let item of group.childrenData">
         <app-child #child [data]="item.data"></app-child>
</div>
<button (click)="doSomethingForGroup(????)">Click here</button>```

它自己的组件和传入的组，并让父级迭代这个组件。您可以完全避免使用 ViewChildren，因为这个新组件中的按钮可以使用传递给它的组数据。

【讨论】：