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

【问题标题】：How to display a hidden div on button click and hide the clicked button in Angular 2?如何在按钮单击时显示隐藏的 div 并在 Angular 2 中隐藏单击的按钮？
【发布时间】：2018-03-17 15:04:06
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css angular

【解决方案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

【讨论】：

【解决方案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

【讨论】：