Kątowy: w którym hak cyklu życia jest danymi wejściowymi dostępnymi dla komponentu

Mam komponent, który otrzymuje tablicę imageobiektów jako Inputdane.

export class ImageGalleryComponent {
  @Input() images: Image[];
  selectedImage: Image;
}

Chciałbym, gdy składnik ładuje selectedImagewartość ustawioną na pierwszy obiekt imagestablicy. Próbowałem to zrobić w OnInithaku cyklu życia w następujący sposób:

export class ImageGalleryComponent implements OnInit {
  @Input() images: Image[];
  selectedImage: Image;
  ngOnInit() {
    this.selectedImage = this.images[0];
  }
}

to daje mi błąd, Cannot read property '0' of undefinedco oznacza, że imageswartość nie jest ustawiona na tym etapie. Próbowałem też OnChangeshaka, ale utknąłem, ponieważ nie mogę uzyskać informacji o tym, jak obserwować zmiany w tablicy. Jak mogę osiągnąć oczekiwany efekt?

Komponent nadrzędny wygląda następująco:

@Component({
  selector: 'profile-detail',
  templateUrl: '...',
  styleUrls: [...],
  directives: [ImageGalleryComponent]
})

export class ProfileDetailComponent implements OnInit {
  profile: Profile;
  errorMessage: string;
  images: Image[];
  constructor(private profileService: ProfileService, private   routeParams: RouteParams){}

  ngOnInit() {
    this.getProfile();
  }

  getProfile() {
    let profileId = this.routeParams.get('id');
    this.profileService.getProfile(profileId).subscribe(
    profile => {
     this.profile = profile;
     this.images = profile.images;
     for (var album of profile.albums) {
       this.images = this.images.concat(album.images);
     }
    }, error => this.errorMessage = <any>error
   );
 }
}

Szablon komponentu nadrzędnego ma to

...
<image-gallery [images]="images"></image-gallery>
...

Właściwości wejściowe są wypełniane przed ngOnInit()wywołaniem. Zakłada się jednak, że właściwość nadrzędna, która dostarcza właściwości wejściowe, jest już wypełniona podczas tworzenia komponentu podrzędnego.

W Twoim scenariuszu tak nie jest - dane obrazów są wypełniane asynchronicznie z usługi (stąd żądanie http). W związku z tym właściwość input nie zostanie wypełniona po ngOnInit()wywołaniu.

Aby rozwiązać problem, po zwróceniu danych z serwera przypisz nową tablicę do właściwości nadrzędnej. Zaimplementuj ngOnChanges()w dziecku. ngOnChanges()zostanie wywołana, gdy wykrywanie zmian kątowych propaguje nową wartość tablicy do elementu podrzędnego.

Możesz także dodać metodę ustawiającą dla swoich obrazów, która będzie wywoływana za każdym razem, gdy zmieni się wartość, i możesz ustawić domyślny wybrany obraz w samym programie ustawiającym:

export class ImageGalleryComponent {
  private _images: Image[];

  @Input()
  set images(value: Image[]) {
      if (value) { //null check
          this._images = value;
          this.selectedImage = value[0]; //setting default selected image
      }
  }
  get images(): Image[] {
      return this._images;
  }

  selectedImage: Image;
}

Możesz go rozwiązać, po prostu zmieniając kilka rzeczy.

  export class ImageGalleryComponent implements OnInit {

  @Input() images: Image[];
  selectedImage: Image;

  ngOnChanges() {
      if(this.images) {
        this.selectedImage = this.images[0];
      }
  }

 }