使用 *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。根据您的控制台日志，*ngFors 中的变量名称似乎混合在一起。请尝试以下方法

<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>