在Angular*ngFor循环中，我可以输出或渲染到模板中的不同/多个位置吗

Question

我有一个项目数组，每个项目都有一个有时共享的类别。我想做的是按类别对模板中的项目进行分组。目前，我通过简单地为每个类别循环数组来实现这一点，但这效率很低。我只想循环数组一次，并分别输出到不同的部分。我似乎找不到一个明确的方法来做这件事。以下是我希望做的事情的大致概述：

<ng-container *ngFor="let item of items">
<!--
The checkbox below needs to be output to one of the proceeding
4 sections based on its category, I assume using a switch.
-->
<mat-checkbox
class="item-toggle"
[checked]="item.enabled"
(change)="toggleItem(item)"
>{{ item.name }}</mat-checkbox
>
</ng-container>
<h3>Category 1</h3>
<section class="item-choices" #category1></section>
<h3>Category 2</h3>
<section class="item-choices" #category2></section>
<h3>Category 3</h3>
<section class="item-choices" #category3></section>
<h3>Category 4</h3>
<section class="item-choices" #category4></section>

有没有一种方法可以使用可用的默认指令来做到这一点？

编辑：更新了示例。我想强调，我不希望重复类别部分。我想将输出导向4个独立的位置。我现在可以通过运行4个循环来实现这一点，每个类别一次。或者，在ts中，我可以将数组过滤为每个类别的子数组。

我希望有一种方法可以单独使用模板或指令来实现这一点。

Answer 1

将所选项目保存在数组中，然后绑定到所选内容。所以，像这样的东西可能会起作用：

checked属性，其中checked是项的items或indexes的数组。

然后，使用ngModel绑定到节。在第一个例子中，第一个部分是这样的：

<section class="item-choices" [(ngModel)]="checked[0]" #category1></section>

第二个：

<section class="item-choices" [(ngModel)]="items[checked[0]]" #category1></section>

基本上，将您选择的选项绑定到ts，然后使用绑定属性绑定部分