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

Posted 2023-03-13

【中文标题】使用 *ngFor 从对象键中获取对象值

【英文标题】：get objects value from objects key using *ngFor

【发布时间】：2020-09-02 05:57:03

【问题描述】：

我有以下数据库结构：

我对如何从 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 吗？

【问题讨论】：

在模板中使用subRow.subRowValue.value | json。使用keyvalue 管道，您需要指定key 和value 来检索它们。

我有错误：错误类型错误：无法读取未定义的属性“值”。如果我只放 subRow.subRowValue| json 我在 html 中什么都没有显示

*ngFors 中的变量名似乎混淆了。我已经发布了答案。请看看它是否适合你。

同样的问题，html中没有任何显示，控制台日志中没有错误

【参考方案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>

【讨论】：

同样的问题，html中没有任何显示，控制台日志中没有错误