Angular View嵌套ngFor中的子对象，但按父对象ngFor对其进行分组

Question

当我嵌套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>内部，但我希望避免在中间制作另一个仅用于分组的组件。

Answer 1

如果我假设你的item.data是属性"groupId"，你可以在做某事之前"过滤"queryList

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

注意：我不检查代码，仅用作灵感

Answer 2

我会考虑制作

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

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