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 - 單擊以編輯表單域

回答

相關問題