Сортировка угловых таблиц без использования материалов, просто метод сортировки? - PullRequest
Новая
       17

Сортировка угловых таблиц без использования материалов, просто метод сортировки?

0 голосов
/ 28 февраля 2019

table.component.html

Когда я нажимаю на заголовок, функция должна сортировать ASC / DESC по всему столбцу. 

<table>
<tr>
  <th *ngFor="let col of columns" (click)="sortTable(col)">{{col}}</th>
</tr>
<tr *ngFor="let user of users">
  <td *ngFor="let col of columns">{{user[col]}}</td>
</tr>
</table>

table.component.ts

Метод sortTable(param) работает только ASC, и я не могу снова щелкнуть тот же заголовок для DESC, поэтому он остается прежним, пока я не нажму на другой заголовок. 

export class DynamicTableComponent implements OnInit {
@Input()
users = [];
@Input()
columns: string[];

constructor() { }

    sortTable(param) {
    this.users.sort((a, b) =>
      (a[param] > b[param]) ? 1 :
        ((b[param] > a[param]) ? -1 :
          0));
  }

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

У меня были проблемы с обратной сортировкой, поэтому я сделал это, и это работает! 

export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];

  direction = false;

  sortTable(param) {
    this.direction = !this.direction;
    const compare = (a, b) => {
        if (!a[param] && !b[param]) {
          return 0;
        } else if (a[param] && !b[param]) {
          return -1;
        } else if (!a[param] && b[param]) {
          return 1;
        } else {
          const value1 = a[param].toString().toUpperCase(); // ignore upper and lowercase
          const value2 = b[param].toString().toUpperCase(); // ignore upper and lowercase
          if (value1 < value2) {
            return !this.direction ? -1 : 1;
          } else if (value1 > value2) {
            return !this.direction ? 1 : -1;
          } else {
            return 0;
          }
        }
      };
    return this.users.sort(compare);
    //this.users = MYITEMS
    }
0 голосов
/ 01 марта 2019

Рассматривали ли вы использовать существующие каналы для сортировки вместо написания собственных?EG: https://github.com/danrevah/ngx-pipes

И, более конкретно, это: https://github.com/danrevah/ngx-pipes#orderby

Используя этот пакет, вам только тогда нужно будет управлять щелчком, чтобы установить переменную, чтобы определить порядок, и будет ли онявляется ASC или DESC, как обозначено префиксом.

EG из документов: 

<!-- Returns array ordered by value of property -->
<p>{{ deepObj | orderBy: 'amount' }}</p>  
<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-amount' }}</p>  
<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->
...