javascript - 根据单击的标题在 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

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

你的 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 key 是要对数据进行排序的列， 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