[英]Angular2 *ngIf Hiding the contents of a Div in the Template
I'm working on a form on my first Angular2 project, and I can't seem to get my *ngIf
to hide a div in my template. 我正在我的第一个Angular2项目的表单上工作,我似乎无法让我的
*ngIf
在我的模板中隐藏div。
Here's my component file: 这是我的组件文件:
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Address } from './signup'
@Component({
selector: 'address-area',
styles: [],
template: `
<form name='addressForm' novalidate>
<label> Get The Report via Standard Mail:</label>
<input name='needAddress' class='checkbox' type='checkbox' [(ngModel)]='address.need' />
<div *ngIf='isNeeded()'>
<input name='add1' class='text' type='text' placeholder='Address Line 1' [(ngModel)]='address.add1' />
<input name='add2' class='text' type='text' placeholder='Address Line 2' [(ngModel)]='address.add2' />
<input name='city' class='text' type='text' placeholder='City' [(ngModel)]='address.city' />
<input name='state' class='text' type='text' placeholder='State' [(ngModel)]='address.state' />
<input name='zip' class='text' type='text' placeholder='Zip' [(ngModel)]='address.zip' />
<input name='country' class='text' type='text' placeholder='Country' [(ngModel)]='address.country' />
</div>
</form>
`
})
export class AddressComponent {
address: Address = new Address(false);
isNeeded = function(){
this.address.need == true;
}
}
and just for reference, here is the class object. 仅供参考,这里是类对象。
export class Address{
need: boolean;
add1: string;
add2: string;
city: string;
state: string;
zip: string;
country: string;
constructor(public n: boolean){
this.need = n;
}
}
isNeeded()
needs to return a value for ngIf
to evaluate. isNeeded()
需要返回一个值来评估ngIf
。
export class AddressComponent {
address: Address = new Address(false);
isNeeded = function(){
return this.address.need == true; // returns the value
}
}
Also, if you just want to show/hide elements, use style binding instead of ngIf
because ngIf
removes the elements from the DOM if the passed expression evaluates to false
which is not efficient if it happens many times. 此外,如果您只想显示/隐藏元素,请使用样式绑定而不是
ngIf
因为如果传递的表达式求值为false
,则ngIf
会从DOM中删除元素,如果多次发生则无效。 You use style binding to show/hide elements like so 您可以使用样式绑定来显示/隐藏元素
<div [style.display]='isNeeded() ? "block" : "none"'>
<input name='add1' class='text' type='text' placeholder='Address Line 1' [(ngModel)]='address.add1' />
<input name='add2' class='text' type='text' placeholder='Address Line 2' [(ngModel)]='address.add2' />
<input name='city' class='text' type='text' placeholder='City' [(ngModel)]='address.city' />
<input name='state' class='text' type='text' placeholder='State' [(ngModel)]='address.state' />
<input name='zip' class='text' type='text' placeholder='Zip' [(ngModel)]='address.zip' />
<input name='country' class='text' type='text' placeholder='Country' [(ngModel)]='address.country' />
</div>
Now, your div
will still be in the DOM, angular justs toggle its style.display
property everytime the expression changes value 现在,你的
div
仍将在DOM中,每次表达式改变值时,angular justs都会切换其style.display
属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.