Angular项目按月份分组交易时显示[object Object]问题求助

你遇到的"[object Object]"显示问题，主要是异步请求时机错误、未正确解析数据源，再加上代码里的一些无效逻辑导致的。咱们一步步来修正：

1. 修复核心数据处理逻辑（TS文件） #

你的代码里有几个关键bug：

• HTTP请求是异步的，ngOnInit里调用getData()时，第一次请求还没返回，this.transactions还是空数组
• 重复发起HTTP请求，且没正确取出JSON里的data数组（你的数据源是包裹在{data: [...], ...}结构里的）
• 存在无效代码片段，比如_.map(Object, 'data');完全起不到作用
• 逻辑顺序错误，return byMonth之后的console.log永远不会执行

下面是修正后的TS代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as _ from 'lodash';
import * as moment from 'moment';

export class TableJsonComponent implements OnInit {
  transactions: any = {}; // 存储最终分组后的数据

  constructor(private httpClient: HttpClient) {}

  ngOnInit() {
    // 只发起一次HTTP请求，在回调里处理数据
    this.httpClient.get("assets/transactions.json").subscribe(response => {
      // 先取出数据源里的交易数组
      const rawTransactions = response['data'];
      this.transactions = this.groupTransactionsByMonth(rawTransactions);
      console.log('分组后的数据:', this.transactions);
    });
  }

  // 抽离分组逻辑，代码更清晰
  groupTransactionsByMonth(transactions: any[]) {
    const monthName = (item: any) => moment(item.transaction_date).format("MMMM");
    return _.chain(transactions)
      .groupBy(monthName)
      .mapValues(items => _.map(items, "customer.name"))
      .value();
  }
}

2. 优化HTML模板 #

你的模板嵌套冗余，内层不需要再套完整的table，直接遍历数组即可：

<table class="table">
  <!-- 遍历每个月份分组 -->
  <ng-container *ngFor="let month of transactions | keyvalue">
    <tr>
      <th colspan="2">{{month.key}}</th>
    </tr>
    <!-- 遍历当前月份下的所有客户名称 -->
    <tr *ngFor="let customer of month.value">
      <td>{{customer}}</td>
    </tr>
  </ng-container>
</table>

关键问题总结 #

• 异步请求处理：必须在HTTP请求的subscribe回调里处理数据，不能在请求发起后立刻同步操作，此时数据还未返回
• 数据源解析：你的JSON响应是包含data字段的对象，必须先取出response.data才能拿到交易数组
• 无效代码清理：删掉无意义的_.map(Object, 'data');代码，避免干扰逻辑
• 模板优化：内层无需嵌套table，直接遍历数组就能正确显示客户名称，而非[object Object]

这样修改后，表格就能正常按月份分组展示客户名称了。

内容的提问来源于stack exchange，提问作者Daire