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);
}

Answer 2

回答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 - ＆gt; false或false - ＆gt; true）。希望这会有所帮助。

回答2： 您list.isAlreadyChosen已经list_Array了。只需在第一个按钮中[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>

[无效] =＆＃34; ChooseButton＆＃34;禁用所有按钮

3 个答案: