Angular表格开发问题：如何横向展示Store_id与Budget数据

你的核心问题是表格结构逻辑错误——当前循环每个商店时，会单独生成一行包含表头和数据，导致内容纵向排列。要实现横向布局，需要将表头所有商店ID放在同一行，所有预算数据放在同一行，调整代码结构如下：

修正后的代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<table class="mat-elevation-z8">
  <!-- 表头行：循环生成所有商店ID的表头单元格 -->
  <thead>
    <tr>
      <th scope="col" *ngFor="let store of stores">{{store.store_id}}</th>
    </tr>
  </thead>
  <!-- 数据行：循环生成所有预算的单元格 -->
  <tbody>
    <tr>
      <td scope="row" *ngFor="let store of stores">{{store.budget}}</td>
    </tr>
  </tbody>
</table>

关键修改点 #

• 移除了错误嵌套的<div>和<ng-container matColumnDef>（若不需要Angular Material的列定义逻辑，这部分完全多余）
• 将表头循环放在<thead>内的<tr>中，确保所有商店ID横向排列成一行表头
• 将数据循环放在<tbody>内的<tr>中，确保所有预算对应横向排列成一行数据

这样就能生成你期望的表格结构：表头一行显示Store_id1、Store_id2、Store_id3，数据行对应显示Budget1、Budget2、Budget3。

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