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

问题描述：

我在Angular UI开发中遇到困难。在这里我有一个要求：如何在按钮上单击显示隐藏的div并在Angular 2中隐藏点击的按钮？

添加按钮的点击就应该表现出一个隐藏的表单：
上添加按钮的点击 - >添加按钮应该隐藏在隐藏的表单
会有一个按钮Cancel-
如果我点击取消形式应该隐藏，并添加按钮就会返回

我已经使用这个角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

答

您可以通过两种方式做到这一点。取决于您是否想在组件或模板中处理它。我个人更喜欢保持模板清洁，并在组件中执行“工作”。因此，在这种情况下，你的代码只会是这样的：

<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

答

我想你要找的是例如：

<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中隐藏点击的按钮？

相关推荐