[禁用] =「選擇按鈕」禁用所有按鈕

我有一個* 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'變量而不是創建另一個變量。 –

[禁用] =「選擇按鈕」禁用所有按鈕

回答

相關問題