Angular 8 - JSON объект не отображается в шаблоне

Question

Я создаю объект JSON из запроса Firestore, который я хочу отобразить в шаблоне моего приложения 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 et c), но это отображается как ничто.

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