Javascript 如何在按钮单击时显示隐藏的div，并在Angular 2中隐藏单击的按钮？

我在Angular UI开发中面临困难。这里我有一个要求：

• 单击“添加”按钮时，应显示一个隐藏表单：
• 单击添加按钮->添加按钮应隐藏
• 在隐藏形式中，将有一个按钮取消-
• 如果我点击取消，表单应该隐藏，添加按钮应该返回

我尝试过使用Angular 2模板语法和声明嵌套的布尔值，但没有得到完美的答案

如何在角度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>

---

我想你想要的是：

<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>

---

比如这里：

您可以通过几种方式来实现这一点。这取决于您是要在组件中还是在模板中处理它。我个人更喜欢保持模板干净，并在组件中进行“工作”。因此，在这种情况下，您的代码将如下所示：

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

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

演示：

---

如前所述，如果您想在模板中执行此操作，它将如下所示：

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

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

添加
取消

演示：

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