отключить select in angular2

Question

Я пишу angular2 приложение. Мне нужны все мои кнопки и выберите с отключенным, а затем мне нужно включить их. Я хочу сделать это, используя поле класса butDisabled, но не повезло. У меня есть этот код:

@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"

Здесь работает Plunker, что я создал

Answer 3

вы не можете отключить избранный с помощью простого класса. 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();