Angular中表格用ng-Repeat="(key,val)"绑定Map无显示问题

我明白你遇到的麻烦了——控制台能正常打印Map的内容，但ng-repeat就是不渲染数据，这确实很让人头疼。核心原因是：AngularJS的ng-repeat指令并不原生支持ES6的Map类型，它只能迭代普通对象、数组或者类数组结构，所以直接绑定Map是行不通的。

下面给你两种可行的解决方案：

方案一：将Map转换为普通对象 #

在控制器里，把Map的键值对转移到一个普通JS对象中，这样ng-repeat就能正常识别了：

// 假设你已经创建了$scope.varMap
$scope.varObj = {};
// 遍历Map，把键值对赋值给普通对象
$scope.varMap.forEach((value, key) => {
  $scope.varObj[key] = value;
});

然后修改前端的表格代码，把遍历目标换成varObj：

<table class="table table-bordered table-list">
  <thead>
    <tr>
      <th>KEY</th>
      <th>VALUE</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(key,val) in varObj">
      <td>{{key}}</td>
      <td>{{val}}</td>
    </tr>
  </tbody>
</table>

⚠️ 注意：如果你的Map键是复杂类型（比如对象），这种方法会有问题，因为JS对象的键只能是字符串或Symbol，复杂类型会被强制转换为字符串，导致键丢失原本的含义。这种情况下建议用方案二。

方案二：自定义过滤器将Map转为数组 #

创建一个AngularJS过滤器，把Map转换成包含key和value属性的对象数组，这样ng-repeat就能遍历数组了：

首先在你的AngularJS应用中注册过滤器：

// 假设你的应用模块名为myApp
angular.module('myApp', [])
.filter('mapToArray', function() {
  return function(map) {
    const result = [];
    if (map instanceof Map) {
      map.forEach((value, key) => {
        result.push({ key: key, value: value });
      });
    }
    return result;
  };
});

然后修改前端的ng-repeat，使用这个过滤器：

<table class="table table-bordered table-list">
  <thead>
    <tr>
      <th>KEY</th>
      <th>VALUE</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in varMap | mapToArray">
      <td>{{item.key}}</td>
      <td>{{item.value}}</td>
    </tr>
  </tbody>
</table>

这种方法兼容性更好，不管Map的键是简单类型还是复杂类型，都能正确渲染。

你可以根据自己的场景选择其中一种方案，应该就能解决ng-repeat不显示内容的问题了。

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