Question

我正在写angular2 app。我需要所有按钮并选择禁用，然后我需要启用它们。我想通过使用我的类字段但禁用但没有运气来做到这一点。我有这段代码：

 @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}}来禁用select。我究竟做错了什么？非常感谢

这是一个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

对于您的情况，使用标记[disabled]="butDisabled"就足够了，但值得注意的是此方法不适用于被动表单，您可以在其中禁用/启用控件代码：

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

Answer 3

如果您想添加/删除单个课程，我建议您使用Angular2中的内置帮助程序。但是，正如已经说过的那样，禁用带有类的选择不会起作用。 Angular2还有另一个属性here的帮助器。使用属性功能，您可以为HTML执行此操作。

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

这适合你的班级

export class AppComponent {
  controlEnabled:boolean = true;
}

Answer 4

当禁用某个选项时，再进行一些操作然后禁用按钮时，您需要使用disabled属性。与@rinukkusu所做的类似，我建议使用# setup rest client my $client = REST::Client->new(); # don't verify SSL certs $client->getUseragent()->ssl_opts(verify_hostname => 0); $client->getUseragent()->ssl_opts(SSL_verify_mode => SSL_VERIFY_NONE);

以下是我创建的工作Plunker

Answer 5

您无法使用简单类禁用选择。 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 6

这对Angular 8项目有效。希望对您有所帮助。

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

Answer 7

尽管据说使用了 [disabled]，但它对我不起作用。没看懂。

但实际上 <select> 和 <option> 是 html 元素，而不是 angular 元素。要以原始方式禁用这些元素，您只需在 disabled 标记中使用 <select>。

现在为了区分，您可以使用这样的 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>

禁用在angular2

7 个答案: