Question

我在Angular UI开发中遇到了困难。在这里，我要求：

点击添加按钮时，它应显示隐藏的表单：
点击添加按钮 - ＆gt;添加按钮应隐藏
以隐藏的形式会有一个按钮取消 -
如果我点击取消，表格应该隐藏，添加按钮应该返回

我尝试使用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
}

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

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

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

2 个答案: