Angular7不显示承诺数据，但是如果我强制刷新浏览器，它将显示

Question

这是我的模板

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

我真的得到了答复

模板什么也不渲染，但是如果我单击浏览器的硬刷新按钮， 它呈现内容。

我不知道原因，有人可以帮助我吗？ 我的英语不好，希望您不要介意。

这是res [0]

Answer 1

尝试这种方式：

<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

Answer 2

原因是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：管道“ AsyncPipe”的'0,1,2,3,4,5,6'

Answer 3

“模板什么也不渲染”但是什么时候？页面中是否还有其他功能可以保存新文章？保存这些新文章后，您是否忘了向this.getArticles()添加呼叫？