使用ngTableParams更新ngTable仅显示第一列问题求助

我来帮你搞定这个问题～从你给出的代码来看，JS部分的数据初始化和ngTableParams的配置是没问题的，问题大概率出在HTML表格的列定义上——ngTable不会自动渲染数据里的所有字段，必须手动为每个字段指定对应的列模板。

问题根源 #

你提供的HTML片段只写了开头，推测你只定义了name列的渲染，没有为bunny和age字段添加对应的列，所以只有第一列能显示。

修正后的完整HTML代码 #

你可以用ng-repeat的方式来定义所有列，示例如下：

<table ng-table="ctrl.tableParams" class="table" show-filter="true">
  <tr ng-repeat="item in $data">
    <!-- Name列 -->
    <td data-title="'Name'" filter="{name: 'text'}" sortable="'name'">
      {{item.name}}
    </td>
    <!-- Bunny列 -->
    <td data-title="'Bunny'" filter="{bunny: 'text'}" sortable="'bunny'">
      {{item.bunny}}
    </td>
    <!-- Age列 -->
    <td data-title="'Age'" filter="{age: 'number'}" sortable="'age'">
      {{item.age}}
    </td>
  </tr>
</table>

代码说明 #

• data-title：设置列的显示标题，用单引号包裹字符串
• filter：为该列添加过滤器，text对应文本过滤，number对应数字过滤
• sortable：开启该列的排序功能，值为数据里对应的字段名
• {{item.字段名}}：绑定数据中对应的字段值

另一种声明式写法（ngTable-column） #

如果你习惯用ngTable的声明式语法，也可以这样写：

<table ng-table="ctrl.tableParams" class="table" show-filter="true">
  <ng-table-column title="'Name'" filter="{name: 'text'}" sortable="'name'">
    <div>{{$data.name}}</div>
  </ng-table-column>
  <ng-table-column title="'Bunny'" filter="{bunny: 'text'}" sortable="'bunny'">
    <div>{{$data.bunny}}</div>
  </ng-table-column>
  <ng-table-column title="'Age'" filter="{age: 'number'}" sortable="'age'">
    <div>{{$data.age}}</div>
  </ng-table-column>
</table>

验证JS部分 #

你的JS代码是正确的，这里再确认一下：

var dataset = [ 
  {name: "Hello50", bunny:"Bunny1", age: 50}, 
  {name: "Hello49", bunny:"Bunny2", age: 49}, 
  {name: "Hello48", bunny:"Bunny3", age: 48}, 
  {name: "Hello47", bunny:"Bunny4", age: 47}, 
  {name: "Hello46", bunny:"Bunny5", age: 46}, 
];
/** @export */ 
this.tableParams = new ngTableParams({count: 10}, { data: dataset});

数据已经正确传入ngTableParams，只要HTML列定义完整，所有列都会正常显示。

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