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>