在 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]="butDisabled"就足夠了，但值得注意的是，這種方法不適用於反應式表單，您可以在代碼中禁用/啟用控件：

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

Answer 2

您可以像這樣綁定到[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 3

這在 Angular 8 項目中對我有用。 希望它有幫助。

<select [attr.disabled]="!name.valid ? 'disabled' : null" formControlName="gender">

Answer 4

如果您想添加/刪除單個類，我建議使用Angular2的內置助手。 但是，正如已經說過的那樣，禁用一個類的選擇是行不通的。 Angular2 在這里也有另一個屬性幫助器。 使用屬性功能，您可以為 HTML 執行此操作。

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

這給你的班級

export class AppComponent {
  controlEnabled:boolean = true;
}

Answer 5

禁用選擇時，會發生更多的事情，然后禁用按鈕，因此您需要使用 disabled 屬性。 與@rinukkusu 所做的類似，我建議使用[disabled]="butDisabled"

這是我創建的工作Plunker

Answer 6

您不能使用簡單的類禁用選擇。 Bootstrap 提供了一個類，它提供了一個簡單的設計，但對於大多數組件來說還不夠。 就像您在第一次選擇時所做的那樣，您必須通過添加一個簡單的 ng2 綁定來將 disabled 屬性添加到您的組件中。

這是一個工作示例

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 7

盡管據說使用[disabled] ，但它對我不起作用。 我沒弄明白。

但實際上<select>和<option>是 html 元素，而不是 angular 元素。 要以原始方式禁用這些元素，您只需在<select>標簽中使用disabled即可。

現在要區分，您可以使用這樣的 ng-container：

<ng-container *ngIf="element.isEditable === true; else notEditable"> 
    <select> 
        <option>
            ...
        </option>
    </select>
</ng-container>

<ng-template #notEditable> 
    <select disabled> 
        <option>
            ...
        </option>
    </select>
</ng-template>