Длина массива равна нулю после получения данных из API

Question

Пытаюсь получить фото из инстаграмма. Этот запрос состоит из двух частей: первая часть - получить идентификаторы фотографий, вторая часть - получить данные фотографий (после получения идентификаторов фотографий). Я получил массив с фотографиями и хочу отобразить его в своем компоненте, но когда я проверяю длину массива, она равна нулю. Поэтому я не могу визуализировать в представлении.

---

Обслуживание

      @Injectable({
    providedIn: 'root',
})
export class InstagramAPIService {
    private photosCollectionControl$ = new Subject<any[]>()

    private urlToGetPhoto: string = 'https://graph.instagram.com/idPhoto?fields=id,media_type,media_url,username,timestamp&access_token=';

    private urlToGetIdsByPhotos: string = 'https://graph.instagram.com/me/media?fields=id,caption&access_token='
    private token:string = 'IGQVJYRnJSLTZATSXFlcTgtdDFoRmlBV0FvY1k2X1FKMUVCazRQT1dEMHlGZA255OWhWRk8tZAVBYdXdHd1hZAMkF0ajFEajBCMTNTMDJueFpsOGs2NEh1ZAUxrZAjFHNm92SjJOdlFqTXZAR'

    photoPromiseCollection:any[] = []
    photoCollection:any[] = []
    constructor(private http: HttpClient) {
        this.toGetPhotosfromAPI()
    }

    private toGetPhotosfromAPI(){

        this.getIdAllPhotos().subscribe( (response:any)  => {
            console.log(response)
            this.getIdOfPhotos(response.data)
        })
    }

    private getIdOfPhotos(arrayIds:any[]){
        //const photoCollection:any[] = []
        this.fullArrayWithRequest(arrayIds)
        this.getResponseOfSusbscriptions()
    
        console.log(this.photoCollection)
        this.photosCollectionControl$.next(this.photoCollection)
    }
    private getResponseOfSusbscriptions(){
        for(let x in this.photoPromiseCollection){
            this.photoPromiseCollection[x].subscribe((response:any) => {
                this.photoCollection.push(response)
            })
        }
        return
    }

    private fullArrayWithRequest(arrayIds:any){
        for(let item in arrayIds){
            this.photoPromiseCollection.push(
                this.getPhoto(arrayIds[item].id)
            )
        }
        return
    }
    //to get all ids of photos (after these ids is necessary to get data of photos)
    private getIdAllPhotos(){
        //return forkJoin({instagram:this.http.get(`${this.urlToGetIdsByPhotos}${this.token}`)})
        return this.http.get(`${this.urlToGetIdsByPhotos}${this.token}`)
    }
    //to get data of photo
    public getPhoto(photoId:string): Observable<any> {
        return this.http.get( `${this.urlToGetPhoto.replace('idPhoto', photoId )}${this.token}` );
    }

    get getphotos(){
        return this.photosCollectionControl$.asObservable()
    }
}

---

Компонент

      @Component({
    selector: 'list-candidates',
    templateUrl: './list-candidates.component.html',
    styleUrls: ['./list-candidates.component.scss'],
    providers: [candidatesServiceProvider],
})
//CandidatesCongressmanService, CandidatesPresidentialService
export class ListCandidatesComponent implements OnInit {

    photos: any;

    constructor(
        private instagramAPIService: InstagramAPIService,
    ) {

    }
    ngOnInit(): void {
        this.chargePhotosOfCandidates();
    }
    chargePhotosOfCandidates() {
        this.instagramAPIService.getphotos.subscribe((response) => {
            console.log(response.length); //length = 0
            this.photos = response;
            console.log(this.photos);
            console.log(this.photos.length); //length = 0

            //without iterating
            for (let x = 0; x < this.photos.length; x++) {
                console.log(x, this.photos[x]);
            }
        });
    }
}