角度:从内容中获取最后 4 个帖子

Question

嗨，我正在尝试从 angular 5 中的内容 api 获取最后四篇博客文章。我已经创建了一个服务，并且能够使用以下代码检索 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"，其中包含一个"promise：ZoneAwarePromise"。其中它有"项目：数组"，其中对象与我记录单个条目时一样。我该如何处理哪些这样的对象？

编辑：

我已经按照以下建议做了：斯蒂芬

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

在我的组件.ts中，在OnInit()

posts$: Observable<any>;
this.posts$ = this.contentfulService.getLastByCount(4).map(entry => entry.fields);

在我的组件.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 仅支持绑定到可迭代对象(如数组)。

Answer 1

您可能想要的是一个可观察量，它发出内容客户端返回的集合的每个item。

为此，您可以使用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)