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

Question

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

为了更好地展示我想要实现的目标，这里有一些伪代码：

<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组中的所有项目将插入A组标题下的div中，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();
}
}
}

Answer 1

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

在组件中，检索到someData后，循环遍历它并将项目添加到相关组中。

组件.ts

someData: any[];
groupA: any[];
groupB: any[];
ngOnInit() {
this.someData = [{
group: 'a'    
}, {
group: 'b'
}, {
group: 'a'
}];
this.groupA = [];
this.groupB = [];
this.someData.forEach(item => {
if (item.group === 'a') {
this.groupA.push(item);
} else if (item.group === 'b') {
this.groupB.push(item);
}
});
}

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

component.html

<div>
<h4>Group A</h4>
<div *ngFor="let item of groupA">
<div>
{{item.brand}}
{{item.model}}
</div>
</div>
</div>
<div>
<h4>Group B</h4>
<div *ngFor="let item of groupB">
<div>
{{item.brand}}
{{item.model}}
</div>
</div>
</div>