angular щелкните заголовок таблицы, чтобы отсортировать строки

Question

Я новичок в angular js, и, честно говоря, я знаю только то, что мне рассказал бывший коллега о проекте, который он передал мне.

Я использую forkJoin, чтобы получить данные из базы данных, потому что мне нужно использовать два разных набора данных для создания одной таблицы в Интернете. И есть другие таблицы данных, которые мне нужно вызвать на той же веб-странице. Итак, forkJoin был тем, что рекомендовал мой коллега, и использование ngOnInit () было грязным, так как не все данные поступали одновременно.

From (AngularJS сортировка строк по заголовку таблицы ) Я узнал об использовании $ scope и angular .module в файле * .ts и orderBy и 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>

Второй найденный мной альтернативный вариант - использовать Сортировка путем импорта из @ угловой / материал . Но когда я пытался развернуть этот код, он дал мне ошибку, которая, казалось, была связана с версией зависимостей. Чтобы заставить код моего коллеги работать, ему и мне пришлось проверить версии основных зависимостей, и теперь все они синхронизированы c. Итак, я не хотел возиться с проблемами версий.

Наконец, я нашел способ сортировки таблицы один раз, когда она загружается в Интернете, но это не совсем то, что я хотел сделать. Я хочу, чтобы эта таблица динамически сортировала строки всякий раз, когда щелкаю по заголовку. И этот пост (или ответчик) сказал, что заказывать трубы не следует. ( Orderby с * ngFor массивом )

Итак,

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;
    }
};