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

Question

如何在ngFor内部创建某些结构，将不会重复？我需要类似ngForOutlet的东西。我想根据某些项目属性对项目进行分组，然后将其插入适当的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组的所有项目将被插入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();
    }
  }
}

如何在ngFor内部创建某些结构，将不会重复？我需要类似ngForOutlet的东西。我想根据某些项目属性对项目进行分组，然后将其插入适当的div中。到...

Answer 1

我建议构建模型以符合您的要求。