如果满足条件，停止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（项目）时，它将把该项目添加到数组中：

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

用户绝不能在数组中添加相同的项目，但我不想改变userInventory数组（或者splice()它）。我希望它仍然可见，只是在其上更改一些样式，使其看起来像已禁用。同时，当单击该项目时，item.isAdded变为true。 我的目标是：当item.isAdded为true时，在div上禁用(click)事件监听器(并添加一些样式)，以便用户无论点击多少次都不能添加相同的项目。

在当前的Angular实现中，这是否可行？

- filipbarak

---

在您的视图中添加一个 if 语句来检查 item.isAdded 是否为真或假。如果为真，则添加 (onclick)，否则不添加。 - kevinniel

Answer 1

使用条件语句尝试一下：

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

- standby954

Answer 2

为此，您可以为添加到购物车中的每个项目添加一个类，如下所示：

<div *ngFor="let item of userInventory"
     class="col-2 c-pointer"
     [class.disabled]="item.isAdded" <!-- Add this class, and customize its look -->
     (click)="addItemToArray(item)">
  <img src="{{item.image}}" class="img-fluid"/>
  <span class="d-block">{{item.name}}</span>
</div>

然后，在您的.ts组件文件中，添加这个条件：

addItemToArray(item) {
    if (!item.isAdded) {
        this.itemsToSend.push(item);
        item.isAdded = true;
    } else {
        // add some error flash message
    }
}

希望我的回答有帮助！：）

- Laiso

---

最终采用了您的解决方案。我没有想到可以如此简单明了地完成它。谢谢。 - filipbarak

你可以使用下面的其他解决方案，但这个方案的优点是，当用户尝试重新添加相同的项目时，你可以添加一些闪现消息。祝好运！ :) - Laiso

在这些情况下，当“else”情况会触发错误时，我更喜欢将其放在第一位：if (失败条件) { // 返回或处理失败路径 } 然后您可以继续函数（不嵌套在任何其他块中），并确保已处理错误情况。只是我的个人意见 :) - vince

Answer 3

对于此类，您可以使用以下内容：

<div *ngFor="let item of userInventory" [class.disabled]="item.isAdded">

对于点击事件，您可以使用三元运算符：

<div *ngFor="let item of userInventory" (click)="item.isAdded ? null : addItemToArray(item)">

但是我认为最好的解决方案是在您的点击处理程序中使用条件。

- user4676340

---

是的，但那不是很清楚，如果这是我的项目，我宁愿使用点击处理程序来满足我的条件。 - user4676340

Answer 4

您可以简单地使用“disabled”属性来实现这一点：

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

- Ankit Agarwal

---

我已经尝试过这个解决方案。不幸的是，Angular 抛出了异常 compiler.js:485 Uncaught Error: Template parse errors: Can't bind to 'disabled' since it isn't a known property of 'div'。 - filipbarak

在这种情况下，请使用 attr.disabled。我已经更新了我的答案。 - Ankit Agarwal

div 没有 disabled 属性。 - Addis