Обнаружение изменений на входном массиве

Question

Я ввожу массив объектов в компонент, который генерируется из ответа HTTP-запроса (асинхронный), и я хочу заполнить другой массив только с помощью первых трех элементов массива.

Я хочу заполнить новый массив одновременно с назначением первого массива из родительского ввода.

Вот мой код, который не работает:

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 } 

Почему я не можешь перехватывать входные изменения свойства массива с помощью занесен сеттеров? И какой хороший альтернативный способ достичь результата, который я хочу?

Answer 1

Это работает, см мой plunker: https://plnkr.co/edit/ZIjepnYZ5IS8FfktU0C1?p=preview

Вы должны нажать эти images[i] «S в массив вместо назначения его каждый раз.

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