Angular 2 - 单击以编辑表单域

我想用输入文本框替换标签，反之亦然，单击Angular 2中的按钮。我知道必须使用ngIf的某种类型，但我对如何执行有点困惑。Angular 2 - 单击以编辑表单域

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>

来源

2017-04-02 pPeter

这看起来不错，目前情况如何？ –

替换为什么？ –

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

你需要添加到您的*ngIf的一个唯一的事情，是感叹号：

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

这意味着当editMode是假的标签所示。感叹号是NOT操作符，它用作变量的真值测试。更多这里：What does an exclamation mark before a variable mean in JavaScript

来源

2017-04-02 17:26:36 Alex

我试过了，那给了我：https://plnkr.co/edit/B6o0yydz0iUEVSKKjY4c?p=preview 我想要的是改变当按下编辑按钮时将名称标签输入到输入字段 – pPeter

那么，您正在使用'ng-show'和'ng-hide'。你应该使用* ngIf就像你在你的问题:) – Alex

@VarunBalachanthiran这不是一个有效的笨蛋，这是一个AJT_82意味着什么：https://plnkr.co/edit/U1poqbiD8uLmk4Bw8AOM – echonax

Angular 2 - 单击以编辑表单域

回答

相关问题