Использование служб REST в Angular 6 с использованием HttpClient дает наблюдаемое значение как неопределенное при подписке

Question

Я создал службу Angular, которая возвращает массив объектов Observable, используя of от rxjs:

export class HackfestService {

  constructor(private http: HttpClient) { }

  getHackfests():Observable<HackFestDetails[]>{
    return of([
      {hackfestId: 1, hackfestName: "Hackfest Alpha",hackfestDate: new Date('June 12, 2018'), noOfParticipants: 500, noClearedPre: 100, isFinalResultOut:true, isPreResultOut:true},
      {hackfestId: 2, hackfestName: "Hackfest Beta",hackfestDate: new Date('July 22, 2018'), noOfParticipants: 0, noClearedPre:0 , isFinalResultOut:false, isPreResultOut:false}
    ]);
  }
}

Работает нормально пока не заменю of расстаться с фактическим HttpClient.get() запрос, как это:

export class HackfestService {

  private hackfestsURL =  'http://localhost:57161/api/Hackfest/GetHackfests';
  constructor(private http: HttpClient) { }

  getHackfests():Observable<HackFestDetails[]>{
    // return of([
    //   {hackfestId: 1, hackfestName: "Hackfest Alpha",hackfestDate: new Date('June 12, 2018'), noOfParticipants: 500, noClearedPre: 100, isFinalResultOut:true, isPreResultOut:true},
    //   {hackfestId: 2, hackfestName: "Hackfest Beta",hackfestDate: new Date('July 22, 2018'), noOfParticipants: 0, noClearedPre:0 , isFinalResultOut:false, isPreResultOut:false}
    // ]);
    return this.http.get<HackFestDetails[]>(this.hackfestsURL);
  }
}

Я проверил URL, который дает результат JSON как:

    [{"hackfestId":1,"hackfestName":"Hackfest Alpha","hackfestDate":"2018-06-12T00:00:00","noOfParticipants":100,"noClearedPre":100,"isFinalResultOut":true,"isPreResultOut":true},
    {"hackfestId":2,"hackfestName":"Hackfest Beta","hackfestDate":"2018-07-22T00:00:00","noOfParticipants":0,"noClearedPre":0,"isFinalResultOut":false,"isPreResultOut":false}]

Я подписался на наблюдаемый в моем компоненте как:

ngOnInit(){
    this.getHackfestList();
    this.selectedHackfest = this.allHackfests[0];
  }

  getHackfestList():void{
    //call api and get the list sorted in descending order of festival date
    this.hackfestService.getHackfests().subscribe(items => {
      this.allHackfests = items;
      console.log(this.allHackfests);
    });

    this.allHackfests.sort((x:HackFestDetails, y:HackFestDetails)=>{return y.hackfestDate.getTime()-x.hackfestDate.getTime()} );
  }

console.log() внутри метода подписки фактически записывает полученные данные JSON из HttpClient.get() метод, но атрибут this.allHackfests остатки undefined и, следовательно, выдает ошибки, когда я пытаюсь получить доступ к любому из его атрибутов.

Официальный учебник для Angular 6 имеет аналогичную реализацию, для которой они заявляют:

Вы заменили http.get, и приложение продолжает работать без каких-либо других изменений, потому что обе функции возвращают Observable

Очевидно, что утверждение не соответствует тому, что я наблюдаю в моей реализации. Есть ли еще какие-то изменения, которые я мог бы пропустить?

Answer 1

Это потому что getHackfests() это асинхронная функция

Код не будет ждать и выполнит следующие строки, отсюда и ошибка.

Вы должны переместить sort часть внутри subscribe,