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

我真的得到了回应

模板没有渲染，但是如果我点击浏览器的硬刷新按钮，它呈现内容。

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

这是资源[0]

Answer 1

原因是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 2

"template render nothing" 但是什么时候？您在页面中是否有其他功能可以保存新文章？保存这些新文章后，您是否忘记添加对 this.getArticles() 的调用？

Answer 3

试试这个方法：

<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

Angular7 不显示承诺数据，但如果我硬刷新浏览器，它会显示

Angular7 does not display promise data, but if I hard refresh browser, it display

promise

ngfor

angular