javascript - 在 Angular/Typescript 中单击按钮/图标时如何将文本字段设置为输入字段？

Question

我是 Angular 6 的新手，我想在单击按钮/图标时将文本字段更改为输入字段。下面提供了部分代码和预期输出。提前致谢。

<div>
   <mat-form-field appearance ="outline">
       <mat-label>Given Name</mat-label>
          <input matInput placeholder="Given name" name="givenName" formControlName="givenName">
       <mat-icon matSuffix">create</mat-icon> #create - pencil icon
   </mat-form-field>
</div>

单击编辑按钮时，它应该显示类似于下图的输入字段。

更改内容后(例如:纽约到波士顿)，它应该显示类似于下一张图片的文本字段。

Answer 1

您可以使用 *ngIf显示或隐藏编辑/提交按钮

HTML代码:

<h3>Edit form</h3>
<div>
    <mat-form-field class="example-full-width" *ngIf="isEditEnable">
        <input matInput placeholder="Enter name" [(ngModel)]="name">
  </mat-form-field>
  <span *ngIf="!isEditEnable">Name : {{name}}</span>
</div>
<div class="example-button-row">
  <button mat-raised-button color="primary" *ngIf="!isEditEnable" (click)="onEdit()">Edit</button>
  <button *ngIf="isEditEnable" mat-raised-button color="primary" (click)="onEdit()">Submit</button> 
</div>

在 TS 代码中:

isEditEnable : boolean = true; // to show and hide the edit button

name : any;

onEdit(){
    this.isEditEnable =!this.isEditEnable;
}

WORKING DEMO