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

问题描述

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

<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 中，我可以将数组过滤为每个类别的子数组。

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

解决方法

将所选项目保存在一个数组中，然后绑定到所选项目。所以，这样的事情可能会奏效：

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，然后使用 bound 属性绑定部分