如何启用只读输入

Question

我有一个使用 ng Ant design 的输入框，现在对输入字段使用只读属性。一旦用户点击编辑，只读必须成为可编辑字段。如何实现。

代码：

<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">

How to enable the readonly input