[英]How to display a hidden div on button click and hide the clicked button in Angular 2?
I'm facing difficulties in Angular UI development. 我在Angular UI开发方面遇到了困难。 Here I'm having a requirement that: 在这里,我要求:
I have tried this using Angular 2 template syntax and by declaring nested boolean values, but I'm not getting the perfect answer. 我已经尝试使用Angular 2模板语法和声明嵌套的布尔值,但我没有得到完美的答案。
How to do this in Angular 2 or 4? 如何在Angular 2或4中执行此操作? Do I have to use any host Listener or event emitter for this? 我是否必须使用任何主机侦听器或事件发射器? I'm sharing my sample code and plunker: 我正在分享我的示例代码和plunker:
template.html 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 test.ts
export class App {
private addParameter:boolean=false;
}
https://plnkr.co/edit/fa3Pdea1mB4RztAgOAW2?p=preview https://plnkr.co/edit/fa3Pdea1mB4RztAgOAW2?p=preview
You can do this in a couple of ways. 您可以通过几种方式完成此操作。 Depending on if you want to handle it in component or in template. 取决于您是否要在组件或模板中处理它。 I personally prefer to keep template clean and do the "work" in component. 我个人更喜欢保持模板清洁并在组件中执行“工作”。 So in that case your code would simply look like this: 那么在这种情况下,您的代码将如下所示:
<button *ngIf="!addParameter" (click)="toggleForm()">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="toggleForm()">Cancel</button>
</div>
and TS: 和TS:
toggleForm() {
this.addParameter = !this.addParameter
}
DEMO: http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview 演示: http : //plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p =preview
and as said, if you want to do this in template, it would look like this: 如上所述,如果你想在模板中执行此操作,它将如下所示:
<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 演示: https : //plnkr.co/edit/xcSzXGWOMNIhuZ83OXbs? p =preview
I think what you're looking for is something like: 我想你要找的是:
<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>
In TS: 在TS中:
addingForm = false;
Like here: https://plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview 像这里: https : //plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.