我想在点击标题时在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,还是应该创建一个函数来对结果集进行排序。非常感谢任何关于如何进行的例子。
您可以使用指令来实现相同的目的。使用指令的优点是您可以在其他任何组件中的任何位置使用它。
你的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
你可以使用Array.prototype.sort
empList.sort(function(a, b) {return b.id -a.id >0})
我会在(click)="sortByEmpId()"
上添加一个td
监听器,以便empId调用一个对你的empList进行排序的函数。在该函数中,您可以使用代码按需要对empList进行排序。
如果列表在您第一次检索时按任何特定顺序排序(假设您检索它),您只需在其上调用Array.prototype.reverse()以进行后续点击。如果不使用Array.prototype.sort()对其进行排序,然后将其反转以进行后续点击。
不建议按管道排序/订购,原因如下:https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
您可以使用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();
}
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>