Angular2 * ngIfテンプレート内のDivの内容を隠す

Question

私は最初のAngular2プロジェクトでフォームを作成していますが、*ngIfでテンプレートのdivを隠すことができません。

ここに私のコンポーネントファイルです：

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; 
    } 
} 

とちょうど参考のために、ここでのクラスオブジェクトです。

export class Address{ 
    need: boolean; 
    add1: string; 
    add2: string; 
    city: string; 
    state: string; 
    zip: string; 
    country: string; 
    constructor(public n: boolean){ 
    this.need = n; 
    } 
} 

Answer 1

isNeeded()ngIfを評価するための値を返す必要があります。また

export class AddressComponent { 
    address: Address = new Address(false); 
    isNeeded = function(){ 
    return this.address.need == true; // returns the value 
    } 
} 

、あなただけ/非表示要素、代わりにそれは多くを起これば渡された式は効率的ではありませんfalseと評価された場合はDOMから要素を削除ngIfngIfための結合を利用スタイルを表示する場合回。あなたは今、とても

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

のような/非表示要素を表示するためにバインディングスタイルを使用し、あなたはまだDOMになり、そのstyle.displayプロパティを切り替えるjusts角度は毎回式は `あなたが実際に何かを返す必要が値に