处理块中多个可编辑字段的更好方法 - Angular 4

Question

我有一个div块，里面有几个可编辑的元素。 （快照1）点击＆＃39;编辑＆＃39;选项显示文本的标签应隐藏，相应的输入字段可见（快照2）

这是我的方法： 在每个可编辑按钮上添加一个方法，并编写一个相应的方法，隐藏标签并显示文本框和反之。

但是我必须为所有可编辑字段重复此行为。有更好的方法吗？例如，在Jquery中，我可以在所有编辑按钮中添加一个公共类，并在点击它时附加一个方法。

示例代码（当然，我可以做得更好，但只看到方法）：

<div>
  <label>External ID</label>
  <span *ngIf="glyphExternalId==='glyphicon glyphicon-pencil'">{{externalId}}</span> 
  <input class="form-control" type="text" name=""  
  [(ngModel)]="externalId" *ngIf="glyphExternalId!=='glyphicon glyphicon-pencil'">
  <i [ngClass]="glyphExternalId" (click)="updateExternalId()"></i>
  <input type="checkbox" name="iccEnabled" id="iccEnabled"><label for="iccEnabled">ICC Enabled</label>
</div>



glyphExternalId="glyphicon glyphicon-pencil"
  updateExternalId(){
    this.glyphExternalId = this.glyphExternalId == 'glyphicon glyphicon-pencil'? 'glyphicon glyphicon-ok': 'glyphicon glyphicon-pencil';

  }
Similarly for each of the editable items