AngularJS中使用Smart-Table的TableView无法显示数据，求排查错误

我是AngularJS初学者，尝试通过以下代码将数组数据展示在TableView中，但数据无法正常显示。我参考Smart Table的官方文档实现需求，请问我哪里出现了错误？

相关代码如下：

<!-- index.html -->
<!DOCTYPE html> 
<html> 
<head> 
  <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
  <script data-require="...">
  <!-- 此处代码不完整 -->
  </script>
</head>
<body>
  <!-- 表格部分代码 -->
</body>
</html>

嘿，我来帮你排查下问题～结合Smart Table的使用规范，我整理了几个新手最容易踩的坑，你可以对照自己的代码逐一检查：

1. 依赖引入是否完整且顺序正确 #

Smart Table依赖AngularJS核心库，必须先引入AngularJS，再引入Smart Table的JS文件。你的代码里<script data-require="...">看起来不完整，大概率是这里漏了关键依赖：

<!-- 先引入AngularJS核心 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- 再引入Smart Table的JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>

2. AngularJS模块是否注入了smart-table #

创建应用模块时，必须把smart-table作为依赖注入，否则Smart Table的指令根本无法生效：

// 控制器所在的JS文件
var myApp = angular.module('myApp', ['smart-table']); // 这里一定要加['smart-table']

myApp.controller('MyTableCtrl', function($scope) {
  // 定义你的原始数据集合
  $scope.rowCollection = [
    {id: 1, name: '张三', age: 25},
    {id: 2, name: '李四', age: 30}
  ];
  // 用于展示的集合（Smart Table会自动处理分页、过滤等操作）
  $scope.displayedCollection = [].concat($scope.rowCollection);
});

3. 表格指令的绑定是否正确 #

Smart Table需要用st-table绑定展示用的集合，st-safe-src绑定原始数据集合，同时ng-repeat要遍历st-table绑定的变量，不能直接用原始数据：

<!-- 正确的表格结构示例 -->
<div ng-app="myApp" ng-controller="MyTableCtrl">
  <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in displayedCollection">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</div>

4. 数据是否正确初始化 #

检查控制器里的数组是否正确赋值，有没有拼写错误（比如变量名大小写不一致）；如果是异步加载数据，要确保数据加载完成后再赋值给rowCollection，否则页面渲染时数据还没准备好。

你可以先从依赖引入和模块注入这两步查起，这是新手最容易忽略的地方～

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