Angular7 не отображает данные обещаний, но если я усиленно обновляю браузер, он отображает - PullRequest
Новая
       5

Angular7 не отображает данные обещаний, но если я усиленно обновляю браузер, он отображает

0 голосов
/ 26 февраля 2019

Это мой шаблон 

<div *ngFor="let article of articleList">
  <p class="title">{{article.title}}</p>
  <p class="content">{{article.content}}</p>
</div>

Это мой код TS 

export class IndexPageComponent implements OnInit {

constructor(private http:HttpClient) {
}

articleList: any;
ngOnInit() {
  this.getArticles();
}
getArticles() {
  const query = new Query('Post');//sdk function
  query.find().then(res => {
    this.articleList = res;
    console.log(res);
  });
}
}

Я действительно получаю ответ

enter image description here*Шаблон 1012 *

ничего не отображает, но если я нажимаю кнопку жесткого обновления браузера, он отображает содержимое.

Я не знаю причину, кто-нибудь может мне помочь?Мой английский не очень хороший, надеюсь, вы не возражаете.

Это разрешение [0]

enter image description here

Ответы [ 3 ]

0 голосов
/ 26 февраля 2019

"шаблон ничего не рендерит" Но когда?У вас есть другая функциональность на странице, которая может сохранять новые статьи?Разве вы не забыли добавить вызов к this.getArticles() после сохранения этих новых статей?

0 голосов
/ 26 февраля 2019

Попробуйте следующим образом: 

<ng-container *ngIf="dataReady">
<div *ngFor="let article of articleList">
  <p class="title">{{article.title}}</p>
  <p class="content">{{article.content}}</p>
</div>
</ng-container>

export class IndexPageComponent implements OnInit {
dataReady = false;
constructor(private http:HttpClient, private cdr: ChangeDetectionRef) {
}

articleList: any;
ngOnInit() {
  this.getArticles();
}
getArticles() {
  const query = new Query('Post');//sdk function
  query.find().then(res => {
    this.articleList = res;
    this.dataReady = false;
    console.log(res);
    this.cdr.detectChanges();
  });
}
}

в component decorator добавьте: changeDetection: ChangeDetectionStrategy.OnPush

0 голосов
/ 26 февраля 2019

Причина в async трубе.async труба автоматически получит значение из Promise или Observable.Но в вашем случае вы уже справляетесь с Promise самостоятельно.Таким образом, articleList больше не является Promise.

Либо удалите асинхронный канал из шаблона: 

<div *ngFor="let article of articleList">
  <p class="title">{{article.title}}</p>
  <p class="content">{{article.content}}</p>
</div>

, либо установите articleList для обещания, возвращенного функцией query.find (). 

getArticles() {
  const query = new Query('Post');//sdk function
  this.articleList = query.find();
}

С вашим текущим кодом вы должны увидеть в консоли ошибку, подобную этой:

Ошибка: InvalidPipeArgument: '0,1,2,3,4,5,6 'для трубы' AsyncPipe '

...