Sorting 角度2：基于嵌套对象的属性对数组进行排序

下面是我的JSON数据

   {
  "items": [
    {
      "id": 26,
      "email": "pk@gmail.com",
      "firstName": "Poornima ",
      "lastName": "karuppu",
      "role": "Student",
      "studentDetails": {
        "discipline": "History",
        "currentDegree": "Master",
        "currentSemester": 58
      },
      "fullName": "Poornima  karuppu"
    },
    {
      "id": 149,
      "email": "na@mail.uni-paderborn.de",
      "firstName": "raj",
      "lastName": "naga",
      "role": "Student",
      "studentDetails": {
        "discipline": "German Lingustics",
        "currentDegree": "Master",
        "currentSemester": 5
      },
      "fullName": "raj naga"
    },
    {
      "id": 134,
      "email": "testuser@testapp.de",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": {
        "discipline": "History",
        "currentDegree": "Master",
        "currentSemester": 15
      },
      "fullName": " "
    },
    {
      "id": 20,
      "email": "nn@upb.de",
      "firstName": "null",
      "lastName": "null",
      "role": "Student",
      "studentDetails": {
        "discipline": "History and Arts",
        "currentDegree": "Master",
        "currentSemester": 4
      },
      "fullName": "null null"
    },
    {
      "id": 184,
      "email": "pk@mail.upb.de",
      "firstName": "Rob",
      "lastName": "Pat",
      "role": "Student",
      "studentDetails": {
        "discipline": "Computer Science",
        "currentDegree": "Bachelor",
        "currentSemester": 25
      },
      "fullName": "Rob Pat"
    },
    {
      "id": 151,
      "email": "nn@gmail.com",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": {
        "discipline": "Art",
        "currentDegree": "Master",
        "currentSemester": 5
      },
      "fullName": " "
    },
    {
      "id": 3,
      "email": "student3@hipapp.de",
      "firstName": "Lamija",
      "lastName": "Halvadzija",
      "role": "Student",
      "studentDetails": {
        "discipline": "Lingustics",
        "currentDegree": "Master",
        "currentSemester": 5
      },
      "fullName": "Lamija Halvadzija"
    },
    {
      "id": 25,
      "email": "neuerstudent@hipapp.de",
      "firstName": "Rolans",
      "lastName": "Mustermann",
      "role": "Student",
      "studentDetails": {
        "discipline": "Linguistics",
        "currentDegree": "Bachelor",
        "currentSemester": 2
      },
      "fullName": "Rolans Mustermann"
    },
    {
      "id": 178,
      "email": "student123@hipapp.de",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 140,
      "email": "neela_upb@hip.com",
      "firstName": "Nilakshi",
      "lastName": "Naphade",
      "role": "Student",
      "studentDetails": null,
      "fullName": "NN"
    },
    {
      "id": 40,
      "email": "pr@gmail.com",
      "firstName": "P",
      "lastName": "K",
      "role": "Student",
      "studentDetails": null,
      "fullName": "PK"
    }

  ],
}

这是我正在使用GetAPI在UI上显示的学生列表。我正在使用angular 2管道对这些记录进行排序。以下是sort.pipe.ts代码：

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

import { User } from '../../../core/user/user.model';

@Pipe({
  name: 'hipUsersSorter'
})
@Injectable()
export class UsersSorter implements PipeTransform {
  transform(users: any, key: string, direction: number): User[] {
    if (key !== '' && users !== null) {
      users.sort(
        (a: any, b: any) => {
          if (a[key] < b[key]) {
            return -1 * direction;
          } else if (a[key] > b[key]) {
            return 1 * direction;
          } else {
            return 0;
          }
        }
      );
    }
    return users;
  }
}

如何根据这些嵌套字段对数据进行排序？有人能就这个问题提供意见吗？ 提前感谢

我将创建一个传递obj和嵌套“路径”的方法，如下所示：

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

import { User } from '../../../core/user/user.model';

@Pipe({
  name: 'hipUsersSorter'
})
@Injectable()
export class UsersSorter implements PipeTransform {
  transform(users: any, key: string, direction: number): User[] {
    if (key && users !== null && users.length > 0) {
      users.sort(
        (a: any, b: any) => {
          const propertyA: number|string = this.getProperty(a, key);
          const propertyB: number|string = this.getProperty(b, key);

          if (propertyA < propertyB) {
            return -1 * direction;
          } else if (propertyA > propertyB) {
            return 1 * direction;
          } else {
            return 0;
          }
        }
      );
    }
    return users;
  }

  private getProperty (value: { [key: string]: any}, key: string): number|string {
    if (value == null || typeof value !== 'object') {
      return undefined;
    }

    const keys: string[] = key.split('.');
    let result: any = value[keys.shift()];

    for (const key of keys) {
      if (result == null) { // check null or undefined
        return undefined;
      }

      result = result[key];
    }

    return result;
  }
}

从'@angular/core'导入{Injectable，Pipe，PipeTransform}；
从“../../core/User/User.model”导入{User}；
@烟斗({
名称：“HipUsersOrster”
})
@可注射（）
导出类UsersOrter实现PipeTransform{
转换（用户：任意，键：字符串，方向：数字）：用户[]{
if（key&&users！==null&&users.length>0）{
用户排序(
（a:任何，b:任何）=>{
const propertyA:number | string=this.getProperty（a，key）；
constPropertyB:number | string=this.getProperty（b，键）；
如果（属性a<属性b）{
返回-1*方向；
}else if（propertyA>propertyB）{
返回1*方向；
}否则{
返回0；
}
}
);
}
返回用户；
}
私有getProperty（值：{[key:string]：any}，key:string）：number | string{
if（value==null | | type of value！==object'）{
返回未定义；
}
常量键：字符串[]=key.split（'.'）；
let result:any=值[keys.shift（）]；
for（键的常数键）{
如果（result==null）{//检查null或未定义
返回未定义；
}
结果=结果[键]；
}
返回结果；
}
}

在您的模板中：

<th (click)="sort('studentDetails.discipline')">{{ 'discipline' | translate }}</th>
<th (click)="sort('studentDetails.currentDegree')">{{ 'degree' | translate }}</th>
<th (click)="sort('studentDetails.currentSemester')">{{ 'semester' | translate }}</th>

{{‘规程|翻译}
{{‘度’|翻译}
{{“学期”|翻译}

---

简单演示：。

请阅读：它适用于studentDetails不为空的记录。但我完整的JSON数据有许多记录，其中studentDetails=null，在本例中，它不起作用：（您在问题中没有提到：）对于那些具有空值的对象，您期望得到什么？请随意在演示中加入空

对象

。很抱歉没有提及。我已经添加了上述问题中的所有JSON数据。我没有更改/分叉plunker。好吧，上面的

方法在处理空值时运行良好。。您的问题可能在模板中。。使用安全导航
操作符
如下：
{{{user.studentDetails？.prodiction}
嘿，它成功了。我不知怎么忘了在getProperty方法中添加结果语句。所以结果是不确定的。非常感谢：）
import { Injectable, Pipe, PipeTransform } from '@angular/core';

import { User } from '../../../core/user/user.model';

@Pipe({
  name: 'hipUsersSorter'
})
@Injectable()
export class UsersSorter implements PipeTransform {
  transform(users: any, key: string, direction: number): User[] {
    if (key && users !== null && users.length > 0) {
      users.sort(
        (a: any, b: any) => {
          const propertyA: number|string = this.getProperty(a, key);
          const propertyB: number|string = this.getProperty(b, key);

          if (propertyA < propertyB) {
            return -1 * direction;
          } else if (propertyA > propertyB) {
            return 1 * direction;
          } else {
            return 0;
          }
        }
      );
    }
    return users;
  }

  private getProperty (value: { [key: string]: any}, key: string): number|string {
    if (value == null || typeof value !== 'object') {
      return undefined;
    }

    const keys: string[] = key.split('.');
    let result: any = value[keys.shift()];

    for (const key of keys) {
      if (result == null) { // check null or undefined
        return undefined;
      }

      result = result[key];
    }

    return result;
  }
}

<th (click)="sort('studentDetails.discipline')">{{ 'discipline' | translate }}</th>
<th (click)="sort('studentDetails.currentDegree')">{{ 'degree' | translate }}</th>
<th (click)="sort('studentDetails.currentSemester')">{{ 'semester' | translate }}</th>