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

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

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

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

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

外部ID
{{externalId}}
ICC启用
glyphExternalId=“glyphicon glyphicon铅笔”
updateExternalId（）{
this.glyphExternalId=this.glyphExternalId=='glyphicon glyphicon铅笔'？'glyphicon glyphicon glyphicon ok'：'glyphicon glyphicon铅笔'；
}
对于每个可编辑项，情况类似

请提供代码，如果可能plunker@TheDictator在edit中提供了一个示例粗略代码。当然，我可以做得更好，但只是看看方法。

<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