如何在Angular Material对话框中通过ng-repeat获取单个单元格无重复结果？

你这明显是把行数据数组直接拿来遍历生成表头列了，才导致添加多行数据时表头和内容列不断重复。咱们来一步步修正：

问题根源 #

你原来的代码里，在<th>上用ng-repeat="tablerow in tableRows"——tableRows是你的行数据数组对吧？这意味着每新增一行数据，就会多生成一个表头列，自然会出现多列重复的情况。

正确的实现思路 #

表头应该对应表格的列，而不是行；表体的每一行才对应tableRows里的一条数据。

假设你的tableRows数据结构是这样的（对象数组，每个对象代表一行）：

$scope.tableRows = [
  {name: "Alice", age: 25, city: "New York"},
  {name: "Bob", age: 30, city: "Los Angeles"}
];

修正后的HTML代码 #

情况1：固定列（推荐，更稳定）

如果你的列是固定的（比如Name、Age、City），直接写死表头，表体遍历行数据即可：

<table class="friends" style="display: inline-block; font-size: 10pt;">
  <thead>
    <tr>
      <th>Name</th>
      <th style="padding: 0.5rem;">Age</th>
      <th style="padding: 0.5rem;">City</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历每一行数据生成tr，track by $index避免重复数据报错 -->
    <tr ng-repeat="row in tableRows track by $index">
      <td>{{row.name}}</td>
      <td>{{row.age}}</td>
      <td>{{row.city}}</td>
    </tr>
  </tbody>
</table>

情况2：动态列（列名不固定时用）

如果列名是动态的，比如从后端返回的结构不确定，可以从第一行数据的键来生成表头：

<table class="friends" style="display: inline-block; font-size: 10pt;" ng-if="tableRows.length > 0">
  <thead>
    <tr>
      <!-- 遍历第一行数据的所有键生成表头 -->
      <th ng-repeat="(key, value) in tableRows[0]" style="padding: 0.5rem;">
        {{key}}
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历每一行数据 -->
    <tr ng-repeat="row in tableRows track by $index">
      <!-- 遍历当前行的所有值生成单元格 -->
      <td ng-repeat="(key, value) in row">
        {{value}}
      </td>
    </tr>
  </tbody>
</table>

额外注意点 #

• 用track by $index：当你的行数据没有唯一标识（比如id）时，加上这个可以避免AngularJS抛出重复数据的错误。
• 空数组处理：动态列的情况要加ng-if="tableRows.length > 0"，避免tableRows[0]报错。

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