2016-08-16 3 views
0

マップの場所の配列を表示する子コンポーネントを含む親コンポーネントがあります。表示する場所は親コンポーネントにロードされます。私は私の親テンプレートでこれを持っている:Angualr2 RC4子コンポーネントのプロパティーセッターが実行されていません

<map-comp class="container-map" [places]="places"></map-comp> 

私はこのwhayに私の場所をロード:

myservice.myfunction(myparameters).subscribe((res: Array<Place>) => { 
         this.places = res 
        }); 

私はこの性質を持っている私の子コンポーネントで:

@Input() set places(places: Array<Place>) { 
    this._places = places; 
    if (this._places != null) { 
     this.placesChanged(); 
    } 
} 

私は私をロードする場合親コンポーネントset placesプロパティは、未定義の場所で実行されます。次に、データをロードして親コンポーネントのプロパティを設定するmyfunctionを開始しますが、子の親プロパティは更新されません。 私は間違っていますか?私はself.mapConfigChanged.emitを使用する場合はここでUPDATE

は私plunker http://plnkr.co/edit/MROuH8znbDxTm0HKFG0Q

です(); googleマップイベントリスナーの外で動作します。しかし、マップからデータが必要なので、このイベントを使用する必要があります

+0

あなたは子コンポーネントのテンプレートを示してもらえますか?親コンポーネントのコンストラクタに 'places'配列を設定すると、子コンポーネントは要素を正しく表示しますか?子コンポーネントテンプレート内の –

+0

は、places配列に関して何もありません。チャイルド内のplacesChangedイベントは、子コンポーネントのgoogleマップにいくつかのマーカーをロードします。 – cpiock

+0

コンストラクターにロード・プレース・コードを入れても変更されません。データは、ボタンのクリックを実行した後にロードされ、親コンポーネントの要素を表示して非表示にします。 – cpiock

答えて

0

私の友人@juristrは私の問題を解決しました。どうもありがとう! 問題は、親コントロールの場所を更新するときにngZoneを使用することで解決されます。

http://plnkr.co/edit/cUG1aqhQhnniD9D87rAa

private mapConfigChange() { 

    this.zone.run(() => { 
     console.log("parent event fired"); 
     this.loadPlaces(); 
    }); 
    } 
0

[places]="places"を使用して以前に渡された配列(追加/削除)を変更するだけでは、このような変更は呼び出されません。
Angularは配列の内容とオブジェクトのプロパティを比較せず、オブジェクトの同一性のみを比較します。 配列が変更された後にthis.places = this.places.slice();を実行して、Angular2変更の検出がバインディングを更新するように試みることができます。
これで問題が解決した場合、オブザーバブルを使用して、値が実際に変更されなかったときにイベントを放出する更新について通知することができます。

+1

いいえ、slice()は私の問題を変えません。私はalexandreの例で始まるプランカを作成しようとします – cpiock

関連する問題