入力配列の変更検出

Question

HTTP要求応答（非同期）から生成されたコンポーネントにオブジェクトの配列を入力していますが、最初の3つの配列要素だけで別の配列を埋めたいとします。

最初の配列が親入力から割り当てられるのと同時に新しい配列を埋めたいと思います。ここで

は動作しません私のコードです：

private _images: any[]; 
private threeImages: any[]; 

@Input() 
set images(images: any[]) { 
    this._images = images; 
    for(let i=0; i < 3; i++){ 
     this.threeImages = images[i]; 
    } 
} 
get images() { return this._images } 

私はセッターを使用してinputedアレイの入力プロパティの変更を傍受できないのはなぜ？そして、私が望む結果を達成するための良い代替手段は何ですか？それが動作している

Answer 1

、私のplunkerを参照してください。https://plnkr.co/edit/ZIjepnYZ5IS8FfktU0C1?p=preview

あなたは、アレイにそれらのimages[i]年代を押すのではなく、毎回を割り当てる必要があります。

import {Component, NgModule, Input} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-cmp', 
    template: `my-cmp!`, 
}) 
export class MyCmp { 

    private _images: any[]; 
    private _threeImages: any[]; 

    @Input() set images(images: any[]) { 
    this._images = images; 

    this._threeImages = []; // CLEAR IT ! 
    for(let i=0; i < 3; i++) { 
     this._threeImages.push(images[i]); 
    } 

    console.log(this._images); 
    console.log(this._threeImages); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    <my-cmp [images]="myImages"></my-cmp> 
    `, 
}) 
export class App { 

    private myImages: any[] = [ 
    {}, 
    {}, 
    {}, 
    {}, 
    {} 
    ]; 

    constructor() { 
    this.name = 'Angular2' 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, MyCmp ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}