Печать списка объектов базы данных в реальном времени

Question

Я пытаюсь распечатать список объектов в таблицу HTML. Я очень новичок в Angular. Я просматривал уроки Mosh по Udemy, но они не совсем совпадают с тем, что я создаю. В моем случае структура БД отличается.

Вот код компонента:

import { AngularFireDatabase } from '@angular/fire/database';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-live-updates',
  templateUrl: './live-updates.component.html',
  styleUrls: ['./live-updates.component.scss']
})
export class LiveUpdatesComponent {
  stocks$: Observable<any[]>;

  constructor(db: AngularFireDatabase) {
    this.stocks$ = db.list('/main').valueChanges();
  }
}

Вот структура данных:

Я немного озадачен тем, как распечатать каждое значение в таблице.

Answer 1

Взгляните на этот стек. https://stackblitz.com/edit/angular-eou7uy

По сути, вы должны получить элемент, который вам нужны, и закрепить его на угловом шаблоне.

<table>
  <tr>
    <th *ngFor="let col of columns">
      {{col}}
    </th>
  </tr>
  <tr *ngFor="let element of stocks$ | async">
    <td *ngFor="let col of columns">
      {{element[col]}}
    </td>
  </tr>
</table>

И вы должны объявить свои столбцы ('am', 'carb', 'cyl' ....). Чувствовать?