在 Angular *ngFor 循環中，我可以 output 或渲染到模板中的不同/多個位置嗎？

Question

我有一系列項目，每個項目都有一個有時共享的類別。 我想做的是按類別對模板中的項目進行分組。 目前我通過簡單地循環每個類別的數組來實現這一點，但這效率低下。 我只想將數組循環一次，然后將 output 分別循環到不同的部分。 我似乎無法找到一種明確的方法來做到這一點。 這是我希望做的粗略概述：

<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>

有沒有辦法使用可用的默認指令來做到這一點？

編輯：更新了示例。 我想強調我不想重復類別部分。 我想將 output 指向 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 ，然后使用綁定屬性綁定部分