Angular 在ngFor或类似ngForOutlet的内部创建不可重复的结构

如何在ngFor内部创建一些不会重复的结构？我需要像NGFOROUTLE这样的东西。 我想根据某些项属性对项进行分组，然后将它们插入适当的div中

为了更好地展示我想要实现的目标，下面是一些伪代码：

<div *ngFor="let item of someData">
    <div>
      <h4>Group A</h4>
        <div *ngForOutlet *ngIf="item.group === 'a'">
            <div>
                {{item.brand}}
                {{item.model}}
            </div>
        </div>
    </div>
    <div>
      <h4>Group B</h4>
        <div *ngForOutlet *ngIf="item.group === 'b'">
            <div>
                {{item.brand}}
                {{item.model}}
            </div>
        </div>
    </div>
  </div>

A组
{{item.brand}}
{{item.model}
B组
{{item.brand}}
{{item.model}

A组的所有项目将插入div中的A组标题下，B组的所有项目将插入B组标题下

@编辑： 目前我有类似的东西，但我想将其分组：

HTML

<div *ngFor="let item of someData">
    <app-some-card #card [brand]="item.brand"></app-some-card>
</div>

<button (click)="onClick()">test</button>

测试

.ts

export class ParentComponent implements OnInit {
  @ViewChildren('card') cards: QueryList<SomeCardComponent>;

  someData = [{...},{...},...];

  onClick() {
    this.cards.forEach(card => {
        card.doSomething();
    }
  }
}

导出类ParentComponent实现OnInit{
@ViewChildren（“卡”）卡：QueryList；
someData=[{…}，{…}，…]；
onClick（）{
this.cards.forEach（card=>{
卡片。doSomething（）；
}
}
}

我建议构建您的模型以满足您的需求

在您的组件中，一旦检索到

someData

，循环遍历它并将项目添加到相关组中

组件技术

someData:any[]；
A组：任何[]；
B组：任何[]；
恩戈尼尼特（）{
this.someData=[{
a组
}, {
b组
}, {
a组
}];
this.groupA=[]；
this.groupB=[]；
this.someData.forEach（项=>{
如果（item.group=='a'）{
此.groupA.push（项目）；
}else if（item.group=='b'）{
此.groupB.push（项目）；
}
});
}

在HTML中绑定到这些组就足够简单了

component.html

A组
{{item.brand}}
{{item.model}
B组
{{item.brand}}
{{item.model}

我在ngFor中有一个组件，项目数据在每次迭代中都会传递给该组件，这样我就可以拥有ViewChildren并轻松地从每个组件调用一个方法。如果我按照你说的那样做，我将需要有许多ViewChildren对象，并对其中的每一个对象进行迭代，以从每个组件调用方法，从而改变问题-这是一个i错过一个重要的事实…你能用一个你的意思的例子更新你的问题吗？我更新了我的问题。我也想以某种方式从组件的整个QueryList中听到事件并计算它们。我仍然不明白为什么这会阻止你对模型中的项目进行分组？

QueryList

在引用不存在时仍然有效在整个HTML中发布