禁用選擇角2

Question

我正在寫angular2應用程序。 我需要我所有的按鈕，並選擇與禁用，然後我需要啓用它們。我想通過使用我的班級字段來做到這一點，但沒有運氣。 我有這樣的代碼：

@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>Disable Enable</h1> 
    <h2> this is a disabled select </h2> 
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" disabled> 
     <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option> 
    </select> 
    <h2> this is a disabled button </h2> 
    <button type="button" class="btn btn-default {{butDisabled}}">Disabled</button> 

    <h2> Why can't I disable the select the same way? </h2> 
    <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" class="{{butDisabled}}"> 
     <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option> 
    </select> 


    `, 
}) 
export class AppComponent { 
    butDisabled = "disabled"; 
    levelNum:number; 
    levels:Array<Object> = [ 
     {num: 0, name: "AA"}, 
     {num: 1, name: "BB"} 
    ]; 

} 

我不明白爲什麼我不能使用{{butDisabled}}禁用選擇。 我在做什麼錯？ 非常感謝

這裏是一個plunker

Answer 1

你可以只綁定到[disabled]屬性，像這樣：

<button type="button" class="btn btn-default" [disabled]="butDisabled">Disabled</button> 

<select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()" [disabled]="butDisabled"> 
    <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option> 
</select> 

而在你的組件使變量的布爾：

export class AppComponent { 
    butDisabled: boolean = true; 

---

工作Plunker例如使用

Answer 2

當禁用選擇有更多一點禁用按鈕時怎麼回事，然後，因此你需要使用禁用屬性。類似於@rinukkusu做，我會建議使用[disabled]="butDisabled"

這裏是我創建

Answer 3

你無法禁用的選擇有一個簡單的類工作Plunker。 Bootstrap提供了一個提供簡單設計的類，但對大多數組件來說這還不夠。 與您爲第一次選擇所做的一樣，您必須通過添加簡單的ng2綁定將禁用的屬性添加到您的組件。

這裏是一個工作示例

https://plnkr.co/edit/z1aeTAPsGA6HLip0RCkM?p=preview

//our root app component 
import {Component, Directive, Output, EventEmitter, Input, SimpleChange} from 'angular2/core' 
import {Observable} from 'rxjs/Observable'; 
import {Observer} from 'rxjs/Observer'; 

@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>Disable Enable</h1> 
    <select type="number" [disabled]="disabled"> 
     <option *ngFor="let level of levels" [ngValue]="level.num">{{level.name}}</option> 
    </select> 
    <button (click)='toggle()'> disable/enable </button> 


    `, 
}) 
export class AppComponent { 
    disabled = true; 
    levels = [{num:1, name: 'test'}]; 

    toggle() { 
    this.disabled = !this.disabled; 

    } 
} 

Answer 4

如果你想添加/刪除一個類，我會建議使用內置的助手從Angular2。但是，正如已經指出的那樣，禁用類選擇不起作用。 Angular2還有另一個幫助屬性here。使用屬性功能，您可以爲您的HTML做到這一點。

<select type="number" [attr.disabled]="controlEnabled"></select> 

這爲你的類

export class AppComponent { 
    controlEnabled:boolean = true; 
} 

Answer 5

對於你的情況是足夠用的標記[disabled]="butDisabled"，但值得注意的是，這種方法不適用於無功形式，你在哪裏工作禁用/啓用代碼中的控件：

this.form.get('myFormControlName').enable(); 
this.form.get('myFormControlName').disable();