Angular переменная область с функцией вызова http

Question

Я относительно новичок в Angular и Typescript, и у меня возникла проблема с переменной областью действия. Я ищу, чтобы вызвать функцию, чтобы вернуть массив путей к изображениям, а затем установить их для другой переменной массива.

    ngAfterContentInit() {
        const minImages = 6;
        const tempImgArr = this.getAllImages(function (imgArr){
            // randomize image order
            imgArr = shuffleArray(imgArr);

            //cut to 6
            imgArr = imgArr.slice(0,minImages);
            console.log(imgArr);   // this displays the correct data
            return imgArr;
        });
      console.log(tempImgArr);   // this shows undefined
    }

    getAllImages(cb) {
      let arrAllImg = [];
      this.http.get<any>(this.backendPath+"/api/").subscribe(
        data => {  
            data.forEach(e => {
                var apiObj = {
                    path: e.Media1,
                    txt: e.MessageTxt
                }
                arrAllImg.push(apiObj);
            });
            cb(arrAllImg);
        },
        error => {
            console.error('There was an error!', error)
            cb(arrAllImg);
        }
      )
    }

Как я могу определить свой tempImgArr для возврата соответствующего массива?

Answer 1

Вы ожидаете, что сможете вернуть значения из подписки. Всякий раз, когда вы хотите вернуть наблюдаемые значения, вы должны вернуть наблюдаемые и подписаться выше в стеке вызовов.

ngAfterContentInit() {
  const minImages = 6;
  this.getAllImages().subscribe((imgArr) => {
    // randomize image order
    imgArr = shuffleArray(imgArr);

    //cut to 6
    imgArr = imgArr.slice(0, minImages);
    console.log(imgArr);   // this displays the correct data

    // TODO: set local property?
  });
}

// return observable
getAllImages(): Observable<any[]> {
  return this.http.get<any>(this.backendPath + "/api/").pipe(
    map(data => data.map(e => ({
      path: e.Media1,
      txt: e.MessageTxt
    }))),
    catchError(error => {
      console.error('There was an error!', error);
      return of([]);
    })
  );
}