角度单击表格标题以对行进行排序

Question

我是 Angular js 的新手，老实说，我只知道前同事告诉我的关于他传递给我的项目的内容。

我正在使用 forkJoin 从数据库中获取数据，因为我需要使用两组不同的数据在 Web 上创建一个表。还有我需要在同一个网页上调用的其他数据表。所以，forkJoin 是我同事推荐的，但使用 ngOnInit() 很麻烦，因为并非所有数据都同时到达。

来自 (AngularJS sorting rows by table header) 我发现关于在 *.ts 文件和 orderBy 和 中使用 $scope 和 angular.module >ng-repeat 在 *.html 文件中。我试图让它工作，但似乎这个例子使用的是硬编码表，而不是从数据库调用数据。此外，当使用 ng-repeat 时，以下代码似乎无法识别 ng-repeat。

<tr ng-repeat="data in myTable|orderBy:'index':false">
   <ng-container *ngIf="someConditions">
      <td>{{ data.index }}</td> //data not recognized
   </ng-container>
</tr>

我发现的第二种选择是通过从 @angular/material 导入来使用 Sort。但是，当我尝试部署该代码时，它给了我一个错误，这似乎与依赖项的版本有关。为了让我同事的代码正常工作，我和他必须检查主要依赖项的版本，现在它们都同步了。所以，我不想惹版本问题。

最后，我找到了一种在网络上加载表格时对表格进行一次排序的方法，但这并不是我想要做的。我希望该表能够在我单击的任何标题时对行进行动态排序。那个帖子（或回答者）说不应该使用排序管道。 (Orderby with *ngFor array)

所以，

1. 在使用 forkJoin 和 ngFor 时有什么方法可以实现标题点击排序器（与 ng-repeat 不同，我可以让它工作）？

2. 如果使用 angular.module 和 $scope 更好，那么我如何在同时调用所有表的同时使用它们（即如何我整合

var app = angular.module('app',[]);

app.controller('myCtrl', function($scope) {
   $scope.orderBy = 'index';
   ...
   $scope.data = {
      myData: [{
         ...
      }]
   };
});

到 *.ts 文件中？）

Answer 1

试试这个

<tr ng:repeat="row in body.$orderBy(sort.column, sort.descending)">
    <td>{{row.a}}</td>
    <td>{{row.b}}</td>
    <td>{{row.c}}</td>
</tr>

scope.sort = {
    column: 'b',
    descending: false
};

scope.selectedCls = function(column) {
    return column == scope.sort.column && 'sort-' + scope.sort.descending;
};

scope.changeSorting = function(column) {
    var sort = scope.sort;
    if (sort.column == column) {
        sort.descending = !sort.descending;
    } else {
        sort.column = column;
        sort.descending = false;
    }
};