javascript - 如果满足条件，则停止 div 上的点击事件——Angular 5

Question

我有一个生成比方说 20 个 div 的循环。每个 div 都是我本地对象数组中的一个对象。这是代码:

<div *ngFor="let item of userInventory"
           class="col-2 c-pointer"
           (click)="addItemToArray(item)">
        <img src="{{item.image}}" class="img-fluid"/>
        <span class="d-block">{{item.name}}</span>
</div>

当用户点击 div(item) 时，它会将项目添加到数组中:

addItemToArray(item) {
    this.itemsToSend.push(item);
    item.isAdded = true;
  }

用户在任何情况下都不允许在数组中添加相同的项目两次，但我不想改变 userInventory 数组(或 splice() 它).我希望它仍然可见，只需更改它的一些样式，使其看起来已禁用。同样如您所见，单击项目时，item.isAdded 变为 true。

我想做的是，当item.isAdded为真时，禁用div上的(点击)事件监听器(并添加一些样式)，这样用户不能添加相同的项目两次，尽管多次点击它。

这在当前的 Angular 实现中可行吗？

Answer 1

在条件下尝试:

(click)="!item.isAdded && addItemToArray(item)"