Angular7不显示承诺数据，但如果我硬刷新浏览器，则显示 {{article.title}}

Question

这是我的模板

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

这是我的密码

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（）返回的promise。

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

使用当前代码，您应该在控制台错误中看到如下：

ERROR错误：InvalidPipeArgument：管道'AsyncPipe'的'0,1,2,3,4,5,6'

Answer 3

“模板没有渲染”但什么时候？您是否在页面中有其他功能可以保存新文章？保存这些新文章后，你不忘记给this.getArticles()添加一个电话吗？