Кнопка редактирования по щелчку делает поле ввода редактируемым

Question

Я новичок в веб-разработке. Мне нужно сделать поле ввода редактируемым по щелчку, а поле ввода установлено для атрибута только для чтения. Я использую ionic4-angular4.

 <ion-item lines="none">
<ion-avatar class="ion-align-self-left" id="pic" (click)="change()">
  <img src="assets/img/min.jpg">
</ion-avatar>
<ion-grid>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-input placeholder="Profile Name" id="input" readOnly></ion-input>
        <span item-end>
          <ion-icon size="small" src="assets/profile/edit.svg" slot="icon-only" (click)="edit()"></ion-icon>
        </span>
      </ion-item>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-input placeholder="User ID " readonly></ion-input>
        <span item-end>
          <ion-icon size="small" src="assets/profile/edit.svg" slot="icon-only" id="edit"></ion-icon>
        </span>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

Вы можете использовать [readonly] в качестве условия в поле ввода: и в зависимости от того, что вы пытаетесь сделать, щелкнуть мышью не имеет смысла, если только это не для кнопки.Может быть, двойной щелчок?

HTML

 <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi" 
      [readonly]="isReadOnly" (dblclick)="enableEdit()">
  </mat-form-field>

JS

export class InputOverviewExample {
  test: isReadOnly= true;

  enable(){
  this. isReadOnly= false;
}
}