0

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

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

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

4

1 回答 1

0

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

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

于 2021-01-03T10:48:30.957 回答