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

Question

我有一个 *ngfor，它为我提供了一定的商品列表，然后单击一个特定的按钮以选择它们。当我单击"选择"按钮时，它会暂时禁用该按钮，直到我从后端获得响应为止。当我从后端得到响应时，按钮变得活跃以取消项目。

我在这里遇到的问题是，当我单击"选择"按钮时，它使列表的所有按钮暂时禁用。但是我想要的是仅做点击按钮。

我的HTML代码片段：

<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

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

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

[disabled]="list.ChooseButton"

用于应用上述内容，您应该将activeButton功能更改为下面，然后通过按钮的list对象（例如(click)="activeButton(list)"

）将CC_5对象更改为

功能

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

Answer 2

答案1：正如@pankaj Parkar的答案所述 - 您的list_Array中的每个项目都需要具有自己的标志chooseButton，而不是对所有项目进行1个公共标志来仅使单击按钮禁用。

现在，说您已经加载了list_Array。您可以使用以下来循环将此属性添加到它，并将其设置为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 3

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

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