如何启用只读输入

Question

我有一个使用ng Ant设计的输入框，现在在输入字段中使用readonly属性。用户单击“编辑”后，只读字段必须变为可编辑字段。如何实现这一目标。

代码：

<i nz-icon type="edit" class="toolbar-icon" (click)="edit()"></i>
<input type="text" nz-input [ngModel]="'French'" [readonly]="true">

ts文件：

edit() {
   console.log("function called");
}

Answer 1

您可以使用<input [readonly]="{{ variable }}>".

在您的*.component.ts中，初始化变量：

private variable: boolean = true;

编辑1

因此，此操作不起作用

在您的*.component.ts中，初始化变量：

  @Input() editable: boolean = false;
    edit() {
     console.log("function called");
     this.editable = true;
    }

然后您可以使用例如

<button (click)="edit()">Click me!</button>
<input type="text" [readonly]="!editable">

对不起，第一个错误答案。 https://stackblitz.com/edit/angular-bei96r

上的实时演示

Answer 2

正方形用于绑定到变量。而且我不认为true是ts文件中的变量。

不过，您可以将true作为字符串传递。

<input type="text" nz-input [ngModel]="'French'" [readonly]="'true'">

或完全删除方括号

<input type="text" nz-input [ngModel]="'French'" readonly="true">