Angular ViewChildren из вложенного 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>  

@ edit: Возможно я мог бы сделать что-то вроде другого компонента <app-parent></app-parent>, который получит данные группы, а затем внутри этого ngFor и <app-child></appChild>, но я бы хотел избежать создания другого компонента в середине только для группировки.

Answer 1

Я бы подумал о том, чтобы сделать

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

своим собственным компонентом с переданной группой, и чтобы родительский элемент перебрал этот компонент. Вы можете полностью отказаться от ViewChildren, потому что ваша кнопка в этом новом компоненте может использовать данные группы, переданные ей.

Answer 2

вы можете «отфильтровать» queryList перед тем, как что-то создать. Если я предполагаю, что ваш 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...
                   })
}

ПРИМЕЧАНИЕ: я не проверяю код, использую только как вдохновение