使用*ngFor从对象键获取对象值

Question

我有以下数据库结构：

对于如何从April和May键获取对象的值，我有点困惑。使用*ngFor在对象上迭代时。我将所有关键点都作为对象。我试图使用keyvalue，但不起作用。

完整代码：

  orderhistory: AngularFireList<any>;
  keyArray: any[]; // to use with *ngFor

  ngOnInit() {

    this.orderhistory = this.af.list("/orderhistory")
    this.orderhistory.snapshotChanges()
    .pipe(
      map(changes =>
        changes.map(c => ({ $key: c.payload.key, ...c.payload.val() }))
      ), tap(val => this.keyArray = []), map(data => {
        data.forEach((row, dataObj) => {
          Object.keys(row).forEach((r, objIndex) => {
            if (r === '$key') {
              this.keyArray.push({ row: row['$key'], 'value': [] });
            } else {
                this.keyArray[dataObj]['value].push({ 'subRowKey': r, 'subRowValue': row[r] })
            }
            return row;
          })
          return row;
        })
        onsole.log(this.keyArray)

        return data;
      })
    ).subscribe((data: any) => {

        console.log(data)
      });
  }

Html

    <tbody *ngFor="let row of keyArray; let i = index">
        <tr role="row"  *ngFor = "let subRow of row.value |keyvalue; ">
            {{subRow.subRowValue|json}}
        </tr>
    </tbody>

输出

如上所述，我的数据现在位于subRowValue下。那么，我如何避免或访问密钥以获取数据呢？是否可以使用| keyvalue？

Answer 1

你很接近了。使用keyvalue管道时，需要显式指定key和value。根据您的控制台日志，似乎在*ngFor中存在变量名称的混淆。请尝试以下方法

<tbody *ngFor="let value of keyArray.value; let i = index">
  <tr role="row"  *ngFor = "let subRow of value.subRowValue | keyvalue; ">
    {{ subRow.value | json }}
  </tr>
</tbody>