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为真时，禁用div上的（click）事件监听器（并添加一些样式），以便用户无法添加相同的项目两次，尽管多次点击它。

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

Answer 1

为此，您可以为购物车中添加的每件商品添加一个类，如下所示：

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

对于班级，您可以使用：

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

（为了便于阅读，我删除了属性）

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

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

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

Answer 3

尝试条件：

(click)="!item.isAdded && 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>

如果满足条件，则停止div上的click事件 - Angular 5

4 个答案: