基于单击的标题在Angular4中排序

Question

我想在点击标题时在Angular4上实现排序。我希望整个结果集在单击的字段上排序。我能够在Angular1中使用这样的东西

 ng-click="sortType = 'empId'; sortReverse = !sortReverse;"

而我的ng-repeat就是这样的

 ng-repeat="employees in searchresponse|orderBy:sortType:sortReverse"

我如何实现类似这样或类似的东西，允许我在单击时按升序/降序对字段进行排序。这就是我从Angular4开始并且当前卡住了

<table class="table table-bordered table-fixed  table-striped text-center">
    <tr style=" background-color: #bccbd4 ">
        <td class="tabH1" align="center">
            <a>
                <u>EmpId</u>
            </a>
        </td>
        <td class="tabH1" align="center">
            <a>
                <u>Name</u>
            </a>
        </td>
        <td class="tabH1" align="center">
            <a>
                <u>Mobile-Num</u>
            </a>
        </td>
    </tr>
    <tr *ngFor="let emp of empList">
        <td align="center">{{emp.id}}</td>
        <td align="center">{{emp.name}}</td>
        <td align="center">{{emp.mobile}}</td>
    </tr>
</table>

我的样本JSON

this.empList = [
    {
        id: '1',
        name: 'test',
        mobile: '1234567890'
    },
    {
        id: '2',
        name: 'kumar',
        mobile: '9786543210'
    }
];

当单击id时，我想要根据empId对整个JSON进行排序。我应该创建自己的Pipe，还是应该创建一个函数来对结果集进行排序。非常感谢任何关于如何进行的例子。

Answer 1

您可以使用指令来实现相同的目的。使用指令的优点是您可以在其他任何组件中的任何位置使用它。

你的HTML会是这样的

<table>
  <thead>
    <th sortColumn [sortKey]="'id'" [data]="data">ID</th>
    <th sortColumn [sortKey]="'name'" [data]="data">Name</th>
    <th sortColumn [sortKey]="'mobile'" [data]="data">Mobile</th>
  </thead>
  <tbody>
  <tr *ngFor="let item of data">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.mobile}}</td>
  </tr>
  </tbody>
</table>

其中sort键是要对数据进行排序的列，sortColumn是指令选择器，data是整个数据数组。

你的指令就是

@Directive({selector: '[sortColumn]'})

export class SortDirective implements OnInit {
  @Input() data: any[];
  @Input('sortKey') key: any;
  private toggleSort: boolean            = false;

  constructor (private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit () {
    this.renderer.listen(this.el.nativeElement, 'click', (event) => {
      let parentNode = this.el.nativeElement.parentNode;
      let children   = parentNode.children;

      if (this.data && this.key) {
        let sortedData: any = this.sortArray();
      }
      this.toggleSort = !this.toggleSort;
    })
  }

  sortArray (): Array<any> {
    let tempArray: Array<any> = this.data;
    tempArray.sort((a, b) => {
      let aKey = a[this.key];
        let str1: string = a[this.key].toLowerCase();
        let str2: string = b[this.key].toLowerCase();
        if (this.toggleSort) {
          if (str1 < str2) {
            return -1;
          }
          if (str1 > str2) {
            return 1;
          }
        }
        else {
          if (str1 > str2) {
            return -1;
          }
          if (str1 < str2) {
            return 1;
          }
        }
      return 0;
    });
    return tempArray;
  }
}

你可以在这里查看工作示例。 https://angular-sey5es.stackblitz.io

Answer 2

你可以使用Array.prototype.sort

empList.sort(function(a, b) {return b.id -a.id >0})

Answer 3

我会在(click)="sortByEmpId()"上添加一个td监听器，以便empId调用一个对你的empList进行排序的函数。在该函数中，您可以使用代码按需要对empList进行排序。

如果列表在您第一次检索时按任何特定顺序排序（假设您检索它），您只需在其上调用Array.prototype.reverse（）以进行后续点击。如果不使用Array.prototype.sort（）对其进行排序，然后将其反转以进行后续点击。

不建议按管道排序/订购，原因如下：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Answer 4

您可以使用observable，当可观察的更改对lista进行排序时

  lista: IData[]; //<--your List
  sortType: string = "id"; //<--variables
  sortReverse: boolean = false;

  private listaChangeSource = new Subject<boolean>();
  listaChange = this.listaChangeSource.asObservable();

  ngOnInit() {

    this.listaChange.subscribe(() => {
      if (!this.lista)
        return null;
      ..here you order the list according this.sortType and this.sortReverse..
    }
  }
/*
<th class="col-min">
          <button class="btn btn-link" (click)="sortList('ID')">
              #
              <span [ngClass]="{'fa fa-caret-down':sortType=='ID' && !sortReverse}"></span>
              <span [ngClass]="{'fa fa-caret-up':sortType=='ID' && sortReverse}"></span>
            </button>
        </th>
*/
//You call this function in your html

sortList(sortType: string) {
    if (this.sortType == sortType)
      this.sortReverse = !this.sortReverse;

    this.sortType = sortType;
    this.listaChangeSource.next(true);  //<--call the listaChange.subscribe

  }

更简单的是我想调用sortFunction而不调用listaChangeSource.next

function sortLista()
{}
sortList(sortType: string) {
    if (this.sortType == sortType)
      this.sortReverse = !this.sortReverse;

    this.sortType = sortType;
    this.sortLista();

  }

Answer 5

  export class AppComponent implements OnInit {
  sortByAsc: boolean = true;

  constructor() { }

  ngOnInit() { }

  sortTable(parm) {
   if(this.sortByAsc == true) {
     this.sortByAsc = false;
     this.filteredData.sort((a, b) => {
      return a[parm].localeCompare(b[parm]);
     });
   } else {
     this.sortByAsc = true;
     this.filteredData.sort((a, b) => {
       return b[parm].localeCompare(a[parm]);
    });
  }
 }
}

HTML

  <th (click)="sortTable(id)">id</th>