我尝试显示一个我从mongodb获取的数组(Chrome networktool显示我得到它(带文章的回复))。我没有收到任何错误,但文章没有显示在模板中。
以下是模板:
<div class="container-fluid">
<div class="row">
<div *ngIf="articles">
<div class="col-lg-5 sm-12 m-6" *ngFor="let arts of articles">
<div class="list-group ">
<!--TODO: Link to ViewArticle-->
<a href="#" class="list-group-item list-group-item-action felx-column
align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">{{arts.headline}}</h5>
<small>{{arts.updated_at}}</small>
</div>
<p class="mb-1">{{arts.textarea}}</p>
<small class="text-muted mutedText">
MutedText.MutedText.MutedText.</small>
</a>
</div>
</div>
</div>
</div>
</div>
Component中的getArticles()方法:声明articles数组!
getArticles():Promise<Article[]>{
return this.articleService.getArticles()
.then(articles => this.articles = articles);
}
服务的getArticles()方法:
getArticles(): Promise<Article[]>{
return this.http.get(`${BASE_URI}${PATH_ARTICLES}`)
.toPromise()
.then((r: Response) => r.json().data as Article[])
.catch(this.handleError);
}
提前致谢, 我在网上找不到任何东西..
答案 0 :(得分:1)
我曾经问过一个类似的问题:custom created method error: "is not a function"得到了GünterZöchbauer的回答:
“如果你将JSON强制转换为TypeScript类,那么所有发生的事情都是你指示静态分析,它可以安全地假设该类的值,实际上并没有改变JSON值,也没有使它成为该类的一个实例。“
您的问题在于:.then((r: Response) => r.json().data as Article[])
。您将它们声明为Article
的数组,但它们不是。它会起作用但实际上它们(如果我错了,请纠正我。这对我来说也是一个新主题)简单的对象。
您可以将对象添加到Article
数组中,但这并不意味着添加的对象变为Article