如何在按钮单击时显示隐藏的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