Angular ViewChildren из вложенного ngFor, но сгруппировать их по родительскому ngFor

Когда я вложил 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>

ТС:

@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>, но я бы не хотел создавать еще один компонент посередине только для группировки.


angular viewchildren
person kkamil4sz    schedule 08.04.2020    source источник
comment
пожалуйста, попробуйте объяснить: как визуально должно выглядеть то, чего вы пытаетесь достичь?   -  person happyZZR1400    schedule 08.04.2020
comment
ребенок - это что-то вроде карты, и я группирую эти карты. Есть шапка группы, затем список карточек и кнопка под ними. В каждой группе есть кнопка. Группы могут быть разделены, например, некоторым отступом снизу и сверху или просто ‹hr›.   -  person kkamil4sz    schedule 08.04.2020

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person Eliseo    schedule 08.04.2020

arrow_upward
1
arrow_downward

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

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

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

person possum    schedule 08.04.2020