Angular: получение последних 4 сообщений от Contentful

Привет, я пытаюсь получить последние четыре сообщения в блоге из содержательного api в angular 5. Я создал службу и могу получить 1 с помощью следующего кода.

getContent(contentId) {
   const promise = this.client.getEntry(contentId);
   return Observable.fromPromise(promise).map(entry => entry.fields);
};

Я хотел бы вернуть его как наблюдаемый, однако, если он будет возвращен как обещание, я хотел бы знать, как работать с обещанием в component.ts и -.html.

getLastByCount(number) {
   var promise = this.client.getEntries({
       limit: number
   })
   ...
}

Если я сделаю то же самое для получения нескольких записей, я получу PromiseObservable, который содержит обещание: ZoneAwarePromise. В котором есть 'items: Array', где объект - это как когда я регистрирую единственную запись. Как мне работать с такими объектами?

Отредактировано:

Я сделал, как предложил: Стефан

getLastByCount(number) {
   var promise = this.client.getEntries({
   limit: number
   })
   return Observable.fromPromise(promise).mergeMap((collection) => (
     Observable.from(collection.items)
   ))
}

И в моем component.ts в OnInit ()

posts$: Observable<any>;

this.posts$ = this.contentfulService.getLastByCount(4).map(entry => entry.fields);

В моем component.html я делаю это при отображении одной записи

<div *ngIf="post$ | async as post">
   <h1>{{ post.headline }}</h1>
   <time>Published on {{ post.published | date: 'fullDate'  }}</time>
   <hr>-->
</div>

Я пробую это при использовании коллекции:

<div *ngIf="posts$ | async as posts">
  <ul>
   <li class="post" *ngFor="let post of posts$ | async">
   <h1>{{ post.headline }}</h1>
   <time>Published on {{ post.published | date: 'fullDate'  }}</time>
   <hr>
  </li>
 </ul>
</div>

Я получаю эту ошибку: Ошибка: не удается найти другой поддерживающий объект «[объект-объект]» типа «объект». NgFor поддерживает привязку только к Iterables, таким как Arrays.


contentful redux-observable angular5 angular-promise
person Alex Justesen Karlsen    schedule 13.03.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что вам, вероятно, нужно, так это Observable, который испускает каждую item коллекции, которую возвращает Contentful-клиент.

Для этого вы можете использовать функцию mergeMap:

Observable
  .fromPromise(promise)
  .mergeMap((collection) => (
    Rx.Observable.from(collection.items)
  ))

Теперь вы можете работать с каждым элементом в наблюдаемой последовательности, как с одной записью выше, например. вы можете

.map(entry => entry.fields)

РЕДАКТИРОВАТЬ:

Оказывается, Angular ожидает, что у вас будет Observable<Entry[]> вместо Observable<Entry>, поэтому правильный способ:

Observable
  .fromPromise(promise)
  .map((collection) => collection.items)
person Stephan    schedule 13.03.2018
comment
Спасибо за предложение. Это продвинуло меня немного дальше, но я все еще не могу это отобразить. Пожалуйста, просмотрите мои правки, где я предоставил больше кода, чтобы полностью понять, что я хочу сделать. Спасибо :) - person Alex Justesen Karlsen; 13.03.2018
comment
Я не такая фирма с Angular (мое предложение касалось только Observables), но согласно https://codecraft.tv/courses/angular/http/http-with-observables/ вы хотите иметь Observable, который генерирует массив элементов, чтобы вы могли избавиться от mergeMap & Observable.from и просто сделать простой map(({ items }) => items) - person Stephan; 13.03.2018
comment
В итоге я использовал обещания вместо Observables, которые отлично работают. - person Alex Justesen Karlsen; 20.03.2018