基于单击的标题在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