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

Я ввожу массив объектов в компонент, который генерируется из ответа на 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 }

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


angular angular2-changedetection
person Kevin LeStarge    schedule 16.09.2016    source источник
comment
Можете ли вы показать нам, как это вызывается в родительском компоненте?   -  person Lucas Tétreault    schedule 16.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Он работает, посмотрите мой плункер: 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 {}
person slaesh    schedule 16.09.2016
comment
Дангит. Виноват. Спасибо! - person Kevin LeStarge; 16.09.2016