如何在切换时禁用 Angular 输入

Question

我正在做内联编辑。我希望输入被禁用，直到用户单击编辑按钮，与保存按钮相对。我试图像这样设置它[disabled]="!hidemeSub[index]"，但它不起作用。我究竟做错了什么？

.html

  <div *ngFor="let item of items; let index = index">
    <form [formGroup]="rates">
      <div  formGroupName="type">
        <div [hidden]="hidemeSub[index]"
          (click)="hidemeSub[index] = !hidemeSub[index];">Edit</div>
        <div (click)="editRates(item.id, index)" [hidden]="!hidemeSub[index]">Done</div>
        <div formArrayName="options">
          <ng-container [formGroupName]="index">
              <input type="text" class="form-control" [disabled]="!hidemeSub[index]" formControlName="rateRangeFrom">
              <input type="text" class="form-control" [disabled]="!hidemeSub[index]" formControlName="rateRangeTo">
          </ng-container>
        </div>
      </div>
    </form>
  </div>

.ts

hidemeSub = {};

Answer 1

你需要使用[属性.禁用]代替[禁用]

<input type="text" class="form-control" [attr.disabled]="!hidemeSub[index]" formControlName="rateRangeFrom">

传递的值应该保持真或空

简单的工作示例 https://stackblitz.com/edit/angular-ivy-87nxyh?file=src/app/app.component.html