angular2子は私が親コンポーネント<strong><em>ホーム</em></strong>と子コンポーネント<strong><em>ホール</em></strong>を持つ親コンポーネント

Question

から発射しました。 ホーム私は都市を選択し、選択された都市に基づいて、私のホールコンポーネントからすべてのホールをロードしようとしています。

ホームHTML：

<div class="dropdown"> 
     <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Select your city</button> 
     <div class="dropdown-content"> 
      <ul *ngFor = "let city of cities"> 
       <a (click)="selectCity(city)" > {{city.name}} </a> 
      </ul> 
     </div> 
     <hall *ngIf = "isSelectHall" [city]="specific_city" ></hall> 
</div> 

ホームコンポーネント：

constructor(private homeService: HomeService) { 
} 

ngOnInit() { 
    this.homeService.getCities().then (
     data => { 
      this.cities = data; 
     });  


} 

selectCity(city:any) { 
    this.specific_city = city; 
    this.isSelectHall = true; 
} 

ホールコンポーネント：

export class Hall implements OnInit{ 
    @Input() city: any; 

    halls: Object; 
    openDiv : boolean; 
    specific_hall: Object; 
    cart : any; 
    cartCount: number; 
    cartHalls: any; 
    countHall: number; 

    constructor(private hallService: HallService){ 

     this.cart=[]; 
    } 

    ngOnInit(){ 
     this.fetchData(this.city.id) 
    } 

    fetchData(cityId : any) { 

     this.hallService.fetchData(cityId) 
     .then( 
      data => { 
       this.halls = data; 
      }); 
    } 

    clicked(item : any) { 

     this.specific_hall = item 
    } 

    onNotify(cartItems : any) : void { 

     this.cartHalls = cartItems; 
     this.cartCount = this.cartHalls.length; 
    } 
} 

ホールHTML：

<div class="mdl-grid"> 
    <div class="mdl-cell mdl-cell--4-col"> 
     <div class="populate-table" [hidden]="!halls"> 
      <table> 
       <tr> 
        <th>Name</th> 
        <th>Landmarks</th> 
        <th>Seating capacity</th> 
        <th>Details</th> 
       </tr> 
       <tr *ngFor="let item of halls"> 
        <td> {{ item.name }} </td> 
        <td> {{ item.landmarks }} </td> 
        <td> {{ item.seating_capacity }} </td> 
        <td> <a (click)="clicked(item)"> See </a> </td> 
       </tr> 
      </table> 
     </div> 
    </div> 

私が直面している問題は：最初にselectCity(city)をクリックしてにホームを選択した都市に固有のすべてのホールをロードしますが、後で他の都市をクリックしても効果はありません。私はここで間違って何をしていますか？

Scrrenshot：

Answer 1

あなたは子供でなFetchData方法を再実行するトリガーを設定する必要があります。 onChangesのようなものや、子コンポーネントと通信します（下記参照）。 ngInitはコンポーネントプロパティに変更が発生するたびに1回だけ実行されますが、再度実行されることはありません。親子通信の取得/設定方法を使用したコードの例を次に示します。

親/子コンポーネントの相互作用：

private this._city: Object; 

    @Input() 

    set city(city: Object) { 
    this._city = city; 
    this.fetchData(this.city.id); 
//whenever city changes via Input, halls is updated which will cause *ngFor to re-render) 
    } 

    get city() { 
    return this._city; 
    } 

Answer 2

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-childがhttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setterで説明したように、あなたの入力にセッターを追加し、それからなFetchDataへの呼び出しをトリガーします。このようにしてください（テストされていません）：

export class Hall implements OnInit{ 
    private _city: any = {}; 

    @Input() 
    set city(city: any) { 
     this._city = city; 
     this.fetchData(this.city.id); 
    }