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

Question

我在 Angular UI 开发中遇到了困难。在这里，我有一个要求:

• 点击添加按钮，它应该显示一个隐藏的表单:
• 点击添加按钮 -> 添加按钮应该隐藏
• 在隐藏形式中会有一个取消按钮-
• 如果我点击取消，表单应该隐藏，添加按钮应该返回

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

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

测试.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