如果满足条件，则停止 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为 true 时，禁用div 上的(单击(事件侦听器(并添加一些样式(，以便用户无法添加同一项目两次，尽管多次单击它。

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

Answer 1

尝试使用

条件：

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

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

希望对您有所帮助！ :)

Answer 3

对于类，您可以使用：

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

(为了可读性，我删除了属性(

对于点击，您可以使用三元：

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

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

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>