Angular 2 - 点击编辑表单字段

Question

我希望在Angular 2中通过单击按钮来替换标签(label)和输入文本框(input)，我知道需要使用某种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>

- pPeter

---

这看起来不错，现在的情况怎么样？ - Tatsuyuki Ishi

替换成什么？ - Roman C

我想要的是这个问题的答案。http://stackoverflow.com/questions/37404746/replacing-label-with-input-textbox-and-vice-versa-by-clicking-a-button-in-angula但那是Angular 1，而我正在使用Angular 2，ng-show和ng-hide不是Angular 2的一部分。 - pPeter

Answer 1

您只需要在您的一个*ngIf中添加一个感叹号即可：

您只需要在您的一个*ngIf中添加一个感叹号即可：

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

这意味着在editMode为false时显示该标签。感叹号是NOT运算符，在变量上用作真值测试。更多信息请参见：JavaScript中感叹号后跟变量的含义。

- AT82

---

我尝试了一下，得到的结果是：https://plnkr.co/edit/B6o0yydz0iUEVSKKjY4c?p=preview我想要的是在按下编辑按钮时将名称标签更改为输入字段。 - pPeter

嗯，你正在使用 ng-show 和 ng-hide。你应该像你在问题中所示的那样使用 *ngIf :) - AT82

@VarunBalachanthiran 这不是一个有效的 Plunker，这是 AJT_82 的意思：https://plnkr.co/edit/U1poqbiD8uLmk4Bw8AOM - eko

@echonax 感谢你，伙计。我正准备去 plunker，但是你很好心！ :P - AT82

@AJT_82 ：没问题！ - eko