Как включить только чтение

Question

У меня есть поле ввода с использованием ng Ant design, теперь я использую атрибут 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

Квадрат используется для привязки к переменной. И я не думаю, что true является переменной в вашем файле TS.

Однако вы можете передать true в виде строки.

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

Или полностью убрать квадратные скобки

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

Answer 2

Вы можете использовать <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