Açısal: Hangi yaşam döngüsü kancasının Bileşen için giriş verilerinin mevcut olduğu

Veri imageolarak nesneler dizisini alan bir bileşenim var Input.

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

Bileşen yüklendiğinde selectedImagedeğerin imagesdizinin ilk nesnesine ayarlanmasını isterim . Bunu OnInityaşam döngüsü kancasında şu şekilde yapmaya çalıştım :

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

bu bana bir hata veriyor , bu Cannot read property '0' of undefinedda imagesdeğerin bu aşamada ayarlanmadığı anlamına geliyor . OnChangesKancayı da denedim ama takılı kaldım çünkü bir dizideki değişiklikleri nasıl gözlemleyeceğime dair bilgi alamıyorum. Beklenen sonuca nasıl ulaşabilirim?

Ana bileşen şuna benzer:

@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
   );
 }
}

Üst bileşenin şablonunda buna sahiptir

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

Girdi özellikleri ngOnInit()çağrılmadan önce doldurulur . Ancak bu, girdi özelliğini besleyen üst mülkün alt bileşen oluşturulduğunda zaten doldurulmuş olduğunu varsayar.

Senaryonuzda durum böyle değil - görüntü verileri bir hizmetten eşzamansız olarak dolduruluyor (dolayısıyla bir http isteği). Bu nedenle, giriş özelliği ngOnInit()çağrıldığında doldurulmayacaktır .

Sorununuzu çözmek için, veriler sunucudan döndürüldüğünde, üst özelliğe yeni bir dizi atayın. Uygulamak ngOnChanges()çocukta. ngOnChanges()Açısal değişiklik tespiti yeni dizi değerini alt öğeye yaydığında çağrılır.

Ayrıca görüntüleriniz için değer değiştiğinde çağrılacak bir ayarlayıcı ekleyebilir ve ayarlayıcının kendisinde varsayılan seçili görüntünüzü ayarlayabilirsiniz:

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

Birkaç şeyi değiştirerek çözebilirsiniz.

  export class ImageGalleryComponent implements OnInit {

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

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

 }