Question

我想基于下拉选择对Json对象进行排序

 <select class="form-control form-control" name="">
    <option value="">Sort By</option>
    <option value="">Name</option>
     <option value="">Date</option>
 </select>

JSON对象

 "users": [
    {
        "name": "John",
        "date": "2017-05-26 00:00:00.0"
    },
    {
        "name": "Kevin",
        "date": "2017-05-27 00:00:00.0"
    },
 ]

Answer 1

我会尝试将那些在<option></option>数组上触发排序的(click)绑定到users个事件。所以在你的HTML中，你可以这样做......

 <select class="form-control form-control" name="">
    <option value="">Sort By</option>
    <option (click)="sort('name') value="">Name</option>
     <option (click)="sort('date')" value="">Date</option>
 </select>

代码......

public users: any[] = [{
    "name": "John",
    "date": "2017-05-26 00:00:00.0"
}, {
    "name": "Kevin",
    "date": "2017-05-27 00:00:00.0"
}];

public sort(by: string): void {
    if (by === 'name') {
        this.users.sort((a: any, b: any) => {
            return a.name.toUpperCase() - b.name.toUpperCase();
        });
    } else if (by === 'date') {
        this.users.sort((a: any, b: any) => {
            return new Date(b.date) - new Date(a.date);
        });
    }
}

这显然是一种快速而肮脏的方法，但应该指向正确的方向。

Answer 2

首先在select标记上使用ngModel将其选择绑定到组件中的变量（在本例中为变量＆＃39; selected＆＃39;）以及将change事件绑定到sort函数（在这种情况下，函数＆＃39; sort（）＆＃39;）：

<select [(ngModel)]="selected" (change)="sort()" class="form-control form-control">
    <option value="">Sort By</option>
    <option value="name">Name</option>
     <option value="date">Date</option>
 </select>

其次，在组件中创建一个函数以应用排序。根据您的排序方式，排序功能可能与下面的排序功能不同，因为这只是一个例子。在这种情况下，您使用条件＆＃39; if / else＆＃39;或者＆＃39;切换＆＃39;或根据选择的选项应用排序的其他逻辑。

sort() {
    this.users.sort(function(a,b)
    {
        return (a[this.selected] < b[this.selected]) ? 1 : ((b[this.selected] < a[this.selected]) ? -1 : 0);
    });
}

有关角度数据绑定的详细信息，请参阅Template Syntax。

Angular 2如何使用下拉框对多个对象进行排序？

2 个答案: