角8 - 模板不渲染JSON对象

Question

我正在从 Firestore 查询构建一个 JSON 对象，我想在我的 Angular 应用程序的模板中显示该对象。当我控制台记录它出现的对象时，但尝试将其插入到模板中不会呈现任何内容。

下面是我用来获取城市的函数。

getCities() {
    this.db.collection("Cities").orderBy('count', "desc").onSnapshot(function(doc) {
      let items = {}
      doc.forEach(function(data){
       items[data.id] = data.data().count
      })
      this.cities = items;
      console.log(this.cities);
      })
  }

这是我插入它的代码（需要美化 CSS 等），但这显示为空。

 <div *ngFor="let item of cities| keyvalue">
  {{item.key}}:{{item.value}}
</div>

控制台日志输出这个

{Christchurch: 27, LowerHutt: 21, Auckland: 10, Wellington: 4, Tauranga: 1, …}

这是我构建的 JSON 对象。我不确定为什么我不能将其插入 HTML 文档中。我还测试过，更新数据库确实会更新控制台日志，所以我认为如果我可以将其插入 HTML，页面将实时更新，这正是我想要的。

Answer 1

函数有它的作用域(this)。尝试使用箭头函数。

getCities() {
  this.db.collection("Cities").orderBy('count', "desc").onSnapshot((doc) =>
  {
    let items = {};
    doc.forEach((data) => {
     items[data.id] = data.data().count
    });
    this.cities = items;
    console.log(this.cities);
  });
}