看起来你已经成功从API拿到销售数据了，现在卡在怎么把这些数据对应到表格的单元格里对吧？我来帮你一步步搞定，分两种场景来处理——一种是你的用户数量固定（就像现有表格里的Name1到Name5），另一种是需要动态适配用户数量的灵活方案。

第一步：先明确数据结构 #

首先得确认this.recObj的格式，假设它是这样的（如果你的数据结构不同，只需要调整后续代码的遍历逻辑即可）：

// 示例数据：键是用户名（如"Name1"、"Name2"），值是该用户的各支付方式数据
this.recObj = {
  Name1: { Cash: 120, PhonePay: 350, Card: 210, CellPay: 80, Total: 760 },
  Name2: { Cash: 90, PhonePay: 280, Card: 150, CellPay: 50, Total: 570 },
  // ... 其他用户数据
};

第二步：固定用户数量的表格填充（适配你现有HTML） #

如果你的表格列数固定（Name1到Name5），可以直接通过DOM操作替换每个td的内容：

修改你的filterData方法 #

filterData(data: any) {
  // 获取表格的tbody元素
  const tbody = document.querySelector('#dtBasicExample tbody');
  if (!tbody) return;

  // 定义表格里的行类型，和tbody里的行一一对应
  const rowTypes = ['Cash', 'Phone Pay', 'Card', 'Cell Pay', 'Total'];
  
  rowTypes.forEach((rowType, rowIndex) => {
    // 获取当前行的所有td单元格
    const tds = tbody.querySelectorAll('tr')[rowIndex].querySelectorAll('td');
    
    // 遍历每个用户列（Name1到Name5）
    for (let colIndex = 0; colIndex < tds.length; colIndex++) {
      const userName = `Name${colIndex + 1}`;
      // 匹配数据键（比如把表格里的"Phone Pay"转成数据里的"PhonePay"）
      const dataKey = rowType.replace(' ', '') as keyof typeof data[userName];
      // 获取对应值，默认0防止数据缺失
      const value = data[userName]?.[dataKey] || 0;
      // 填充到单元格
      tds[colIndex].textContent = value.toString();
    }
  });
}

第三步：动态适配用户数量（更灵活的方案） #

如果你的用户数量不固定，建议动态生成表头和tbody，让表格自动适配数据：

修改HTML（只保留基础结构） #

<table id="dtBasicExample" class="table table-hover table-bordered table-striped table-sm">
  <thead class="table-primary">
    <tr>
      <th class="th-sm text-danger">Division:</th>
      <!-- 动态用户表头会插入这里 -->
    </tr>
  </thead>
  <tbody>
    <!-- 动态数据行会插入这里 -->
  </tbody>
</table>

修改TS代码的filterData方法 #

filterData(data: any) {
  const table = document.querySelector('#dtBasicExample');
  if (!table) return;
  const theadTr = table.querySelector('thead tr')!;
  const tbody = table.querySelector('tbody')!;

  // 1. 动态生成用户表头
  const userNames = Object.keys(data);
  userNames.forEach(name => {
    const th = document.createElement('th');
    th.className = 'th-sm';
    th.textContent = name;
    theadTr.appendChild(th);
  });

  // 2. 动态生成数据行
  const rowTypes = [
    { key: 'Cash', displayName: 'Cash' },
    { key: 'PhonePay', displayName: 'Phone Pay' },
    { key: 'Card', displayName: 'Card' },
    { key: 'CellPay', displayName: 'Cell Pay' },
    { key: 'Total', displayName: 'Total' },
  ];

  rowTypes.forEach(row => {
    const tr = document.createElement('tr');
    // 添加行标题
    const th = document.createElement('th');
    th.className = 'th-sm';
    th.textContent = row.displayName;
    tr.appendChild(th);

    // 添加每个用户的对应数据单元格
    userNames.forEach(name => {
      const td = document.createElement('td');
      td.className = 'th-sm';
      td.textContent = (data[name][row.key] || 0).toString();
      tr.appendChild(td);
    });

    tbody.appendChild(tr);
  });
}

额外推荐：Angular数据绑定方案（更符合框架最佳实践） #

从你的代码里的subscribe和cnvForm来看，应该是用Angular开发的，更推荐用数据绑定替代直接DOM操作，代码更易维护：

组件模板修改 #

<table class="table table-hover table-bordered table-striped table-sm">
  <thead class="table-primary">
    <tr>
      <th class="th-sm text-danger">Division:</th>
      <th class="th-sm" *ngFor="let user of userNames">{{user}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rowTypes">
      <th class="th-sm">{{row.displayName}}</th>
      <td class="th-sm" *ngFor="let user of userNames">{{salesData[user][row.key] || 0}}</td>
    </tr>
  </tbody>
</table>

组件类修改 #

userNames: string[] = [];
salesData: Record<string, any> = {};
// 定义行的键和显示名称映射
rowTypes = [
  { key: 'Cash', displayName: 'Cash' },
  { key: 'PhonePay', displayName: 'Phone Pay' },
  { key: 'Card', displayName: 'Card' },
  { key: 'CellPay', displayName: 'Cell Pay' },
  { key: 'Total', displayName: 'Total' },
];

filterData(data: any) {
  this.salesData = data;
  this.userNames = Object.keys(data);
}

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