从 API 获取数据后数组长度为零

如何解决从 API 获取数据后数组长度为零

我正在尝试获取 Instagram 的照片。它请求有两部分，第一部分是获取照片的 id，第二部分是获取照片的数据（在获取照片的 id 之后）。我得到了一个包含照片的数组，想在我的组件中呈现它，但是当我检查数组的长度时，它为零。因此我无法在视图中渲染。

---

服务

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