2017-02-15 5 views
0

Я пытаюсь отобразить массив, который я получаю из mongodb (Chrome networktool показывает, что я получаю его (ответ со статьями)). Я не ошибаюсь, но статьи arent показаны в шаблоне.Angular 2 Cant display Array from GET-Request

Вот шаблон:

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

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

    } 

Спасибо заранее, я не могу найти что-нибудь в сети ..

+0

Вы можете увидеть соответствующие данные внутри вашего 'затем()' в компоненте? Можете ли вы поставить 'console.log()' перед тем, как назначить его 'this.articles'? – echonax

+0

Кроме того, еще один простой тест, чтобы узнать, работает ли назначение в соответствии с назначением: просто введите

{{articles}}

где-нибудь (не внутри * ngIf, конечно) – dquijada

+0

ok после того, как я добавил 'console.log() 'to' .then() 'статьи показаны в представлении ... как это могло быть? – Vale

ответ

1

Однажды я задал аналогичный вопрос к этому: custom created method error: "is not a function" с ответом от Günter Zöchbauer:

«Если вы включите JSON в класс TypeScript, все происходит в том, что вы указываете на статический анализ, что он может смело предположить, что значение принадлежит этому классу, что фактически не изменяет значение JSON вообще, а также не делает его экземпляром этого класса ».

Ваша проблема здесь: .then((r: Response) => r.json().data as Article[]). Вы объявили их как массив Article, но это не так. Это сработает, но на самом деле они (поправьте меня, если я ошибаюсь. Это тоже новая тема для меня) простые объекты.

Вы можете добавить объекты в массив Article, но это не означает, добавленные объекты превращается в Article

+0

Я скопировал блок '.then()' из Tour of Heroes из Angular, но я соглашусь с тем, что – Vale