如果滿足條件，則停止div上的click事件-Angular 5

Question

我有一個循環，讓我們說20格。 每個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

為此，您可以為購物車中添加的每個項目添加一個類，如下所示：

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