3

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 }

セッターを使用して、入力された配列の入力プロパティの変更をインターセプトできないのはなぜですか? そして、私が望む結果を達成するための良い代替方法は何ですか?

4

1 に答える 1

2

動作しています。私のプランカーを参照してください: 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 {}
于 2016-09-16T19:05:27.460 に答える