Как использовать asyn c трубу с Observable <ApiResponse> - PullRequest
Новая
       17

Как использовать asyn c трубу с Observable <ApiResponse>

0 голосов
/ 04 февраля 2020

Машинопись: 

getMyList(): Observable<ApiResponse> {
    return this.http.get<ApiResponse>(this.myListUrl);
  }

this.myList = getMyList();

HTML: 

<ng-select [items]="myList | async">

The List: 
Id: 1, Name: foo; Id: 2, Name: bar; ...

Ранее я делал что-то подобное, но это не работает asyn c (с каналом ): 

getList().subscribe(data => {
   data.result.forEach(entry => {
      this.myList.push(entry.Name);
   });
});

Я прочитал что-то с отображением наблюдаемого ApiResponse в наблюдаемый MyList, но я понятия не имею, как это сделать. Ищу совета

1 Ответ

1 голос
/ 04 февраля 2020

Вы можете найти здесь демонстрацию stackblitz о том, как использовать HttpClient, Observable и async трубу.

Позвольте мне предложить вам несколько лучших практик:

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

  • Нет необходимости делать подписку для заполнения массива. Наблюдаемые очень мощные с async трубой.

  • Distin guish с вашей моделью ответа API и моделью элемента внутри. (если это так). В моем примере вы можете видеть, что get возвращает модель ApiResponse, но после того, как мы получаем массив ApiItem.

Обновление:

HttpClient.get возвращает наблюдаемый. Это как трубопровод. Затем вы можете определить цепочку операторов, и каждый раз, когда данные передаются, они будут проходить через этот конвейер для преобразования. В этом примере api возвращает объект ApiResponse с одним уникальным свойством: массивом ApiItem. map оператор преобразует входное значение. Здесь он возвращает список элементов.

Вы найдете много хороших руководств по Observables и операторам pipe. Например, Пример HTTP с Observables из Asim .

Надеюсь, это вам немного поможет.

...