[禁用] =“选择按钮”禁用所有按钮

我有一个* 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>

来源

2017-03-09 devanshsadhotra

目前你有ChooseButton标志全球，这就是为什么只要你改变标志，它反映处处组件上下文。

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

[disabled]="list.ChooseButton"

对于应用上述你应该改变activeButton功能下面，在此之前对按钮的click传递list对象像(click)="activeButton(list)"

功能

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

来源

2017-03-09 07:57:37

那么我怎么可能使它在我的类型脚本文件中为真或假，目前我使用它像 activeButton = function（listId）{ this。ChooseButton = true; 后，我有我的API调用的响应我让 this.ChooseButton =假 } – devanshsadhotra

它给我一个错误，如‘关于字符串'“无法创建属性’ChooseButton 58bfc0e3733305f5e” 这个字符串就是所选择项的ID – devanshsadhotra

@devanshsadhotra您必须传递（click）=“activeButton（list）”对象，而不是字符串。 –

下面是另一种方式来做到这一点：

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

来源

2017-03-09 09:03:00 mickdev

答1： 作为@Pankaj Parkar的回答说 - 你list_Array需要每个项目有它自己的标志chooseButton，不必对所有项目，使只有点击的按钮禁用1个共同的旗帜。

现在，假设你已经加载了你的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 - >假的还是假的 - >真）。希望这可以帮助。

答2： 您已经list.isAlreadyChosen出现在您list_Array。只需做第一个按钮[disabled]="!list.isAlreadyChosen"和[disabled]="list.isAlreadyChosen"第二个应该解决您的问题。简单。 ;）

来源

2017-03-09 09:04:18

请看第二个答案。 ;） –

当我跟着你的第二个答案，它使已经选择的按钮被禁用，并取消选择按钮启用。但功能应该保持，就像我还可以取消选择已经选择的项目 – devanshsadhotra

我刚刚编辑过，以在第一个按钮中反转“list.isAlreadyChosen'标志到'！list.isAlreadyChosen'，反之亦然。这是你想要的吗？基本上，我在这里说的是操作'list.isAlreadyChosen'变量而不是创建另一个变量。 –

[禁用] =“选择按钮”禁用所有按钮

回答

相关问题