在 Angular 2 中有条件地添加禁用属性

Question

我有一个禁用的 ngBootstrap 日期选择器。如何根据我拥有的变量值有条件地禁用此功能，hasExistingEnrollmentPeriods?

我试过 disabled="hasExistingEnrollmentPeriods" 但即使表达式为假，也总是将 disabled 设置为 true。

<input class="form-control" placeholder="MM-DD-YYYY" name="effecDate" ngbDatepicker #ed="ngbDatepicker"
  (click)="ed.toggle(); DetectChange()" (ngModelChange)="onSelectEffectiveDate($event)" formControlName="effectiveDate" disabled>
  <div class="input-group-append">
     <button class="btn btn-outline-secondary calendar" (click)="ed.toggle()" type="button">
        <i class="fal fa-calendar-alt"></i>
     </button>
  </div>

Answer 1

使用 Angular property binding with the brackets notation 确保参数被计算为表达式：

[disabled]="hasExistingEnrollmentPeriods"

Answer 2

您需要使用 [disabled]，而不是 disabled。

disabled="hasExistingEnrollmentPeriods" 表示 assign string value "hasExistingEnrollmentPeriods" to "disabled" attribute.
[disabled]="hasExistingEnrollmentPeriods" 表示 assign value of "hasExisstingEnrollmentPeriods" to "disabled" attribute..

在 Angular 2 中有条件地添加禁用属性

Conditionally add disabled attribute in Angular 2

ng-bootstrap

angular