angular - 输入数组的变化检测

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 }

为什么我不能使用 setter 拦截输入数组的输入属性更改？什么是实现我想要的结果的好方法？

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