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

此外，如果您只想顯示/隱藏元素，請使用樣式綁定而不是ngIf因為如果傳遞的表達式求值為false ，則ngIf 會從DOM中刪除元素，如果多次發生則無效。 您可以使用樣式綁定來顯示/隱藏元素

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

現在，你的div仍將在DOM中，每次表達式改變值時，angular justs都會切換其style.display屬性