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

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