时间戳

首页 > 解决方案 > Angular 8/9 如何动态禁用也动态创建的按钮？

javascript - Angular 8/9 如何动态禁用也动态创建的按钮？

问题描述

所以我有一个项目，我有一组动态创建的按钮。每组有两个按钮，当一个按钮被点击时，它的可折叠内容就会出现。如果单击集合中的另一个按钮，则第一个按钮的内容消失，而第二个按钮的内容出现。（为简洁起见，我想我会排除内容）。可以通过简单地更改一个名为 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>

如何仅禁用用户正在与之交互的集合中的第二个按钮？任何帮助表示赞赏！

标签： javascripthtmlangularangular9

解决方案

问题是您已将 [disabled] 属性设置为isImageAdded，它是组件中的全局属性。因此将其设置为 true/false 将影响绑定到它的所有按钮的禁用状态。

在它的位置，您可能更喜欢在totalSetsOfButtons数组中设置一个变量，并使用它来启用/禁用相应的按钮。

例如：

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

并且在与应用程序交互时，可以更新数组项中 isImageAdded 的值，并使用它。

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

推荐阅读