Данные из Realtime Firebase отображаются в консоли, но не на странице html

Question

Component.ts

plats является узлом root моей базы данных Firebase, я хочу отобразить каждого дочернего элемента моего root узла на странице angular. Данные отображаются в консоли, но не отображаются на странице angular. Заранее благодарю за помощь.

    itemValue = '';
    name: string;
    plats: Observable<any[]>;
    itemRef: AngularFireObject<any>;

    constructor(public db: AngularFireDatabase) 
    {
    this.itemRef = db.object('plats');
    this.itemRef.snapshotChanges().subscribe(action => {
    const data = action.payload.val();
    console.log(action.payload.val());
    return { ...data };
    });

 }

компонент. html

    <div class="container">
      <table>
        <tr>
          <th>Community</th>
        </tr>
       <tr *ngFor="let item of plats | async">
          <td>{{item}}</td>  
      </tr> 
     </table>
   </div>

Answer 1

Попробуйте это:

this.itemRef = db.object('plats');
this.plats = this.itemRef.snapshotChanges().map(items => {
  return items.map(val => {
    const data = val.payload.doc.data();
    const id = val.payload.doc.id;
    return { id, ...data };
});

Answer 2

<tr *ngFor="let item of plats">
  <td>{{item}}</td>  
</tr> 

в вашем коде здесь вы хотите получить доступ к значению ключевого элемента. просто получите к нему доступ как {{item.key}}. надеюсь, это сработает.

Answer 3

Назначьте данные для plats

.ts

const data = action.payload.val();
this.plats = data;

шаблон:

<tr *ngFor="let item of plats">
  <td>{{item}}</td>  
</tr> 

ИЛИ

Сохраните ваш . ts файл как есть, так и в шаблоне, используйте itemRef

<tr *ngFor="let item of itemRef | async">
   <td>{{item}}</td>  
</tr>