如何在按鈕上單擊顯示隱藏的div並在Angular 2中隱藏點擊的按鈕？

Question

我在Angular UI開發中遇到困難。在這裏我有一個要求：

• 添加按鈕的點擊就應該表現出一個隱藏的表單：
• 上添加按鈕的點擊 - >添加按鈕應該隱藏在隱藏的表單
• 會有一個按鈕Cancel-
• 如果我點擊取消形式應該隱藏，並添加按鈕就會返回

我已經使用這個角2模板語法和聲明嵌套布爾值嘗試過，但我沒有得到完美的答案。

如何在Angular 2或4中做到這一點？我必須爲此使用任何主機監聽器或事件發射器嗎？我分享我的示例代碼和plunker：

template.html

<button(click)="addParameter=addParameter==true?false:true"> 
       Add</button> 

      <div class="Parameters" *ngIf="addParameter==true"> 

      <input name="hello"> 

      <button (click)="hideForm();">Cancel</button> 
      </div> 

test.ts

export class App { 

    private addParameter:boolean=false; 

} 

https://plnkr.co/edit/fa3Pdea1mB4RztAgOAW2?p=preview

Answer 1

您可以通過兩種方式做到這一點。取決於您是否想在組件或模板中處理它。我個人更喜歡保持模板清潔，並在組件中執行「工作」。因此，在這種情況下，你的代碼只會是這樣的：

<button *ngIf="!addParameter" (click)="toggleForm()">Add</button> 
<div class="Parameters" *ngIf="addParameter"> 
    <input name="hello"> 
    <button (click)="toggleForm()">Cancel</button> 
</div> 

和TS：

toggleForm() { 
    this.addParameter = !this.addParameter 
} 

DEMO：http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview

---

和說，如果你想做到這一點模板，它看起來像這樣：

<button *ngIf="!addParameter" (click)="addParameter = !addParameter">Add</button> 
<div class="Parameters" *ngIf="addParameter"> 
    <input name="hello"> 
    <button (click)="addParameter = !addParameter">Cancel</button> 
</div> 

DEMO：https://plnkr.co/edit/xcSzXGWOMNIhuZ83OXbs?p=preview

Answer 2

我想你要找的是例如：

<div> 
     <form> 
     <input name="hello"> 
     <button *ngIf="addingForm===false" (click)="addingForm = true">Add</button> 
     <button *ngIf="addingForm===true" (click)="addingForm = false">Cancel</button> 
     </form> 
     <form *ngIf="addingForm===true"> 
     <input name="hidden"> 
     </form> 
    </div> 

在TS：

addingForm = false; 

喜歡這裏：https://plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview