Question

我目前在我的angular2应用程序上显示JSON数据，我通过后端从我的服务获取，html看起来像这样：

<tbody *ngFor=" let user of users | sort: 'points'">
                <td> {{user.id}} </td>
                <td> {{user.name}} </td>
                <td> {{user.points}} </td>
</tbody>

我正在尝试根据点数字段以降序显示此数据，因此将首先显示点数最多的用户。

这是我的排序管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(array: Array<string>, args: string): Array<string> {
array.sort((a: any, b: any) => {
    if ( a[args] < b[args] ){
        return -1;
    }else if( a[args] > b[args] ){
        return 1;
    }else{
        return 0;   
    }
});
return array;
 }
}

我已经在app.module.ts中导入了管道并将其添加到声明中，但在尝试加载数据时出错：

Cannot read property 'sort' of undefined

有谁知道我做错了什么？感谢

Answer 1

由于没有值，因此抛出错误。只需检查数组中管道内是否有值，如下所示，

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'sort'
})
export class SortPipe implements PipeTransform {
    transform(array: Array<string>, args: string): Array<string> {
        if(!array)
        {
            return [];
        }
        if (array & array.length > 0) {
            array.sort((a: any, b: any) => {
                if (a[args] < b[args]) {
                    return -1;
                } else if (a[args] > b[args]) {
                    return 1;
                } else {
                    return 0;
                }
            });
            return array;
        }
    }
}

Answer 2

在尝试渲染表之前，应确保初始化用户。试试这个：

<table *ngIf="users">
     <tbody *ngFor=" let user of users | sort: 'points'">
            <td> {{user.id}} </td>
            <td> {{user.name}} </td>
            <td> {{user.points}} </td>
     </tbody>
</table>

否则你的烟斗看起来应该有效。

另外，Angular documentation建议不要在管道中排序。他们说它效率不高，如果你在组件本身中排序，你就会有更好的代码。

按字段的Angular2顺序JSON数据

2 个答案: