打印实时数据库对象列表

Question

我正在尝试将对象列表打印到HTML表中。我是Angular的新手。我一直在观看有关Udemy的Mosh教程，但它们与我正在构建的内容并不完全匹配。就我而言，数据库结构是不同的。

这是组件代码：

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” ....）。 有道理吗？