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

Question

我在Angular UI開發方面遇到了困難。 在這里，我要求：

• 單擊添加按鈕時，它應顯示隱藏的表單：
• 點擊添加按鈕 - >添加按鈕應該隱藏
• 隱藏的形式將有一個按鈕取消 -
• 如果我點擊取消表格應該隱藏並添加按鈕應該返回

我已經嘗試使用Angular 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
}

演示： 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>

演示： 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