Angular 2从GET请求显示数组无法显示

我尝试显示一个数组，我从mongodb中获取（Chrome网络工具显示我得到它（与文章响应））。我没有得到任何错误，但文章没有显示在模板中。Angular 2从GET请求显示数组无法显示

这里是模板：

<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>

的getArticles（）在组件方法：文章数组声明！

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); 

    }

在此先感谢，我不能在网络上找到任何东西..

来源

2017-02-15 Vale

你可以看到你''然后在（）的组件内部的相关数据？你可以把'console.log（）'分配给'this.articles'之前吗？ – echonax

此外，另一个简单的测试，看看该任务是否按预期工作：只要把

某处（当然不是在* ngIf里面） – dquijada

确定后我添加了console.log（） '到.then（）'文章显示在视图..如何可以？ – Vale

我曾问过类似的问题，这样的：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

来源

2017-02-15 13:15:47 SovietPanda

我从Angular的英雄之旅中复制了'.then（）'块，但我会接受 – Vale

Angular 2从GET请求显示数组无法显示

回答

相关问题