如何明確禁用按鈕角

您好我有一組下面的按鈕，如何明確禁用按鈕角

let Btns: Array<any> = [{ 
    type: "submit", 
    BtnType: "prev", 
    label: "Previous", 
    class: "btn-outline", 
    icon: "kd-back", 
    disabled: false 
}, 
{ 
    type: "submit", 
    BtnType: "next", 
    label: "Next", 
    icon: "kd-play", 
    class: "btn-text", 
    disabled: false 
}];

我也有兩個變量：

private nextBtn_disabled: boolean = false; 
private prevBtn_disabled: boolean = true;

我實現禁用功能的按鈕。該行爲是這樣的：

上一頁按鈕必須被禁用時，第一次加載頁面
下一個按鈕必須被禁止，當用戶點擊上一個

以下是我的HTML：

<div class="form-group text-center"> 
    <button *ngFor="let btn of Btns" [type]="(btn.type=='submit')?'submit':'button'" class="btn btn-icon" [ngClass]="btn.class" (click)="_btnClick(btn, _finalConfig)" [disabled]="nextBtn_disabled"> 
     <i *ngIf="btn.BtnType!='next'" [class]="btn.icon"></i> 
     <span>{{btn.label}}</span> 
     <i *ngIf="btn.BtnType=='next'" [class]="btn.icon"></i> 
    </button> 
</div>

我該如何實現它？我試過||條件和&&條件在nextBtn_disabled和prevBtn_disabled之間。但沒有工作。任何想法的傢伙？提前致謝。

來源

2017-03-17 blackdaemon

||條件不起作用，因爲預設按鈕默認情況下始終禁用。 – blackdaemon

如果你只有兩個按鈕，爲什麼需要數組和'ngFor'？只需在HTML模板中直接定義它們，然後您就沒有複雜的定義具有兩個「模式」的按鈕了。 –

不會有多少按用戶 – blackdaemon

我會推薦這樣的東西。

<button [disabled]="isInvalid()">Your html</button> 

isInvalid() { 
    return (checkCondition_to_be_met || clicked_on_prev_button); 
}

來源

2017-03-17 03:46:14

Pramod，如果你不介意，可以更深入地解釋一下 – blackdaemon

Pramod，我有兩個按鈕我怎樣才能處理這個方法的每個人的禁用屬性 – blackdaemon

所以你的代碼需要滿足以下條件。當頁面第一次加載時，必須禁用prev按鈕。必須在滿足一定條件時禁用下一個按鈕，當用戶單擊prev.so時，必須先禁用該按鈕才能滿足您的第一個條件，對於prev按鈕，設置[disabled] =「prev_btn_disabled」，其中prev_btn_disabled = true。對於要滿足的第二個條件，給你的[禁用]一個函數，在模型發生變化時自動檢查更新。函數返回一個布爾值，通過評估你的條件得到滿足 –

代碼是這樣的：

檢查你的第二個點（當滿足一定的條件也必須被禁用下一個按鈕必須被禁止，當用戶點擊分組）

HTML代碼：

<div> 
<button *ngFor="let btn of btns" [disabled]="btn.disabled"  (click)="btnClick(btn,btns)">{{btn.label}}</button> 
</div>

根據您的需要添加其他html代碼。

組件代碼：

import { Component } from '@angular/core'; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 


btn1 :boolean = false; 
btn2 :boolean = false; 

btns: Array<any> = [ 
    { 
     type: "submit", 
     BtnType: "prev", 
     label: "Previous", 
     class: "btn-outline", 
     icon: "kd-back", 
     disabled: this.btn1 
    }, 
    { 
     type: "submit", 
     BtnType: "next", 
     label: "Next", 
     icon: "kd-play", 
     class: "btn-text", 
     disabled: this.btn2 
    }]; 


    btnClick(btn,btns){ 

     var certain_condition = true; //put your code for any certain condition here and make it true or false. 
     if((btn.label === "Previous") || certain_condition){ 
      console.log(btns[1]); 
      btns[1].disabled = true; 
     } 

    } 

    }

對於你的第一個點使「BTN1：布爾=真;」嘗試根據您的需要更改各種條件。

來源

2017-03-17 05:54:40

如何明確禁用按鈕角

回答

相關問題