时间戳

首页 > 解决方案 > 启用或禁用 ngFor 迭代元素

angular - 启用或禁用 ngFor 迭代元素

问题描述

我有以下html代码

 <canvas id="canvas{{i}}" #mycanvas width="550" heigth="650" (click)="onChartClick($event)" *ngIf="individualVisibility"></canvas>

此画布在 for 循环中迭代，创建多个画布。我只想启用一个并禁用剩余的画布。我尝试使用 ngIf，但它适用于所有元素。在这种情况下，我可以创建一个自定义指令并使用它吗？任何人都可以提供建议。

我不想隐藏元素，基本上我希望将这些元素从 DOM 中删除。

标签： angular

解决方案

要在单击时显示或隐藏画布元素，您必须跟踪它们的可见性状态。

在您的组件中，创建一个visible长度与*ngFor.

visible: boolean[];

// Initialize 'visible' array. 'collection' is the iterable object used in *ngFor.
this.visible = new Array(this.collection.length).fill(true);

将索引传递给画布元素的单击事件处理函数。

<canvas *ngIf="visible[i]" id="canvas{{i}}" (click)="onChartClick(i)"></canvas>

修改 click 事件处理函数以仅显示选定的画布并删除其他画布。

onChartClick(index) {
  this.visible = this.visible.map((value, i) => {
    if (i === index) {
      // Keep selected canvas visible.
      return true;
    } else {
      // Remove others.
      return false;
    }
  });
}

查看 StackBlitz 上的现场演示：https ://stackblitz.com/edit/angular-kshfid

推荐阅读