Angular 2-单击以编辑表单字段

Question

我想通过单击Angular 2中的按钮来用输入文本框替换标签，反之亦然。我知道我必须使用某种ngIf，但是我对如何做有些困惑。

HTML：

<form>
<div class="information">
  <label *ngIf="editMode">{{textValue}}</label>
  <input *ngIf="editMode" [ngModel]="name">
  <button (click)="editMode=true">Edit</button>
  <button (click)="editMode=false">Save</button>
</div>
</form>

Answer 1

您唯一需要添加到其中之一的*ngIf是感叹号：

<label *ngIf="!editMode">{{textValue}}</label>

这意味着当editMode为 false 时会显示标签。感叹号是 NOT 运算符，用于对变量进行真值测试。更多内容请参见：变量前的感叹号在 JavaScript 中意味着什么