GET-Requestからの角2カンタンディスプレイ配列

Question

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

コンポーネントで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); 

    } 

おかげで、 ...

Answer 1

私はかつてこれに似た質問質問：custom created method error: "is not a function"を

"JSONをTypeScriptクラスにキャストすると、すべてが起こっているのは、あなたが静的な分析を示しているということです。そのクラスの値を安全に仮定することができます。実際にはJSONの値はまったく変更されず、そのクラスのインスタンスにもなりません。

あなたの問題は.then((r: Response) => r.json().data as Article[])です。あなたはそれらをArticleという配列として宣言しましたが、そうではありません。それは動作しますが、現実には（私が間違っていれば私を修正します。それは私にとっても新しいトピックです）簡単なオブジェクトです。

あなたはArticleの配列にオブジェクトを追加することができますが、それが追加されたオブジェクトを意味するものではありませんが、あなたの `その後、（）`であなたのコンポーネント内の関連データを見ることができますArticle