[disabled]="ChooseButton" 禁用所有按钮

Question

我有一个 *ngFor，它给了我特定的商品清单，我点击一个特定的按钮来选择它们。当我单击我的选择按钮时，它会暂时禁用该按钮，直到我从后端获得响应。当我收到来自后端的响应时，按钮变为活动状态以取消选择该项目。

我在这里面临的问题是，当我单击选择按钮时，它会暂时禁用列表中的所有按钮。但我想要的是只禁用单击的按钮。

我的 HTML 代码 sn-p:

<ion-card *ngFor="let list of list_Array;>  
 <ion-card-content >
        <p style="color: #666; " [innerHTML]="list.item"></p>
      </ion-card-content>  
    <button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="ChooseButton">
              <div class="chosen" 
                    ng-class="{'chosen': isChosen}">
                  <p >choose</p>
              </div>
      </button>
     <button ion-button color="secondary" clear (click)="activeButton(list._id)" *ngIf="list.isAlreadyChosen==false"  [disabled]="ChooseButton" >
              <div class="choosen" 
                    ng-class="{'chosen': isChosen}">
                  <p >choose</p>
              </div>
      </button>
    </ion-card> 

Answer 1

答案 1： 正如@Pankaj Parkar 的回答所说-list_Array 中的每个项目都需要有自己的标志chooseButton，而不是为所有项目设置一个通用标志，以便仅禁用单击的按钮。

现在，假设您已加载您的list_Array。您可以使用以下 for 循环将这个属性添加到它并最初将其设置为 false：

for(var i = 0; i < list_Array.length; i++){
    list_Array[i]['chooseButton'] = false;
}

现在，将列表作为参数从您的 UI 代码传递给 activeButton(list) 方法，例如：(click)="activeButton(list)"（请记住在此处传递整个对象而不是 list._id，就像您所做的那样）。

现在，用你的方法：

activeButton(list) { 
    list.chooseButton = !list.chooseButton;
}

在这里，我已将 list.chooseButton 否定为之前的值（true -> false 或 false -> true）。希望这会有所帮助。

答案 2： 您的list_Array 中已经存在list.isAlreadyChosen。 只需在第一个按钮中执行 [disabled]="!list.isAlreadyChosen" 并在第二个按钮中执行 [disabled]="list.isAlreadyChosen" 即可解决您的问题。简单。 ;)

Answer 2

这是实现此目的的另一种方法：

//component
disableMe:boolean[];

disableThis(id){
   this.disableMe[id] = !this.disableMe[id];
}

//template
<button ion-button color="secondary" clear (click)="activeButton(list._id); disableThis(list._id)" *ngIf="list.isAlreadyChosen==true" [disabled]="disableMe[list._id]">
              <div class="chosen" 
                    ng-class="{'chosen': isChosen}">
                  <p >choose</p>
              </div>
</button>

Answer 3

目前您有ChooseButton 全局标志，这就是为什么一旦您更改该标志，它就会反映在组件上下文中的任何地方。

将ChooseButton 属性设为每个集合元素的本地属性，即list.ChooseButton。

[disabled]="list.ChooseButton"

为了应用上述内容，您应该将activeButton 函数更改为下面，然后在按钮的click 上传递list 对象，例如(click)="activeButton(list)"

功能

activeButton (item) { 
    item.ChooseButton = true;
    console.log("listId", item._id);
}