Angular 8/9 如何動態禁用同樣是動態創建的按鈕？

Question

所以我有一個項目，我有一組動態創建的按鈕。 每組有兩個按鈕，當一個按鈕被點擊時，它的可折疊內容就會出現。 如果單擊集合中的另一個按鈕，則第一個按鈕的內容消失，而第二個按鈕的內容出現。 （為簡潔起見，我想我會排除內容）。 總集合可以通過簡單地更改一個名為 totalSetsOfButtons 的變量的值來確定。 現在，它設置為數字 8，因此將有八組兩個按鈕。

在第一個按鈕的可折疊內容中，有一個用戶可以與之交互的圖像上傳。 如果用戶與之交互，我希望禁用第二個按鈕。 當用戶加載圖像時，名為isImageAdded的變量從null切換到true ，這告訴disabled屬性在第二個按鈕中觸發，如下所示。 問題是，如果添加圖像，這會禁用每組中的所有第二個按鈕。

<div *ngFor="let item of totalSetsOfButtons; let i = index">
  <h5 class="set-num">Set #{{i+1}}</h5>

  <div class="set-btns">
    <div class="set{{i}}-btn1" id="set-btn1">
      <p>
        <button class="btn btn-primary btn-light question-btn1" type="button" data-toggle="collapse" [attr.data-target]="'#collapseExample' + i" aria-expanded="false" [attr.aria-controls]="collapseExample1"> Add New Question
        </button>
      </p>
    </div>

    <div class="set{{i}}-btn2" id="set-btn2">
      <p>
        <button class="btn btn-primary btn-light question{{i}}-btn2" [disabled]="isImageAdded" type="button" data-toggle="collapse" [attr.data-target]="'#collapseExample2' + i" aria-expanded="false"
                        [attr.aria-controls]="collapseExample2">Add Pre-existing Question
        </button>
      </p>
    </div>
  </div>
</div>

如何僅禁用用戶正在與之交互的集合中的第二個按鈕？ 任何幫助表示贊賞！

Answer 1

問題是您已將 [disabled] 屬性設置為isImageAdded ，它是組件中的全局屬性。 因此將其設置為 true/false 將影響綁定到它的所有按鈕的禁用 state。

在它的位置，您可能更喜歡在totalSetsOfButtons數組中設置一個變量，並使用它來啟用/禁用相應的按鈕。

例如：

totalSetsOfButtons = [
  { ...yourEarlierArgs, isImageAdded: false },
  { ...yourEarlierArgs, isImageAdded: false },
  ... more 6 similar items
];

並且在與應用程序交互時，可以更新數組項中 isImageAdded 的值，並使用它。

<button [disabled]="item.isImageAdded">Add Pre-existing Question</button>