[disabled] ="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全局标志,这就是为什么只要您更改该标志,它就会反映组件上下文中的任何位置.

使ChooseButton属性对应于每个集合元素,即list.ChooseButton.

[disabled]="list.ChooseButton"

为了应用上面的内容,您应该在按钮activeButton之前传递list对象之前将函数更改为下面的函数click(click)="activeButton(list)"

功能

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