Angular 2:根据嵌套对象

时间:2017-02-22 23:42:11

标签: sorting angular pipe

以下是我的JSON数据

   {
  "items": [
    {
      "id": 26,
      "email": "poornimakaruppu@gmail.com",
      "firstName": "Poornima ",
      "lastName": "karuppu",
      "role": "Student",
      "studentDetails": {
        "discipline": "History",
        "currentDegree": "Master",
        "currentSemester": 58
      },
      "fullName": "Poornima  karuppu"
    },
    {
      "id": 149,
      "email": "nagaraj@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": "nilakshi@upb.de",
      "firstName": "null",
      "lastName": "null",
      "role": "Student",
      "studentDetails": {
        "discipline": "History and Arts",
        "currentDegree": "Master",
        "currentSemester": 4
      },
      "fullName": "null null"
    },
    {
      "id": 184,
      "email": "patrickr@mail.upb.de",
      "firstName": "Rob",
      "lastName": "Pat",
      "role": "Student",
      "studentDetails": {
        "discipline": "Computer Science",
        "currentDegree": "Bachelor",
        "currentSemester": 25
      },
      "fullName": "Rob Pat"
    },
    {
      "id": 151,
      "email": "neha@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": "Nilakshi Naphade"
    },
    {
      "id": 40,
      "email": "poornimakaruppasamy@gmail.com",
      "firstName": "Poornima",
      "lastName": "Karuppasamy",
      "role": "Student",
      "studentDetails": null,
      "fullName": "Poornima Karuppasamy"
    },
    {
      "id": 5,
      "email": "student2@hipapp.de",
      "firstName": "Nilakshi",
      "lastName": "Naphade",
      "role": "Student",
      "studentDetails": null,
      "fullName": "Nilakshi Naphade"
    },
    {
      "id": 181,
      "email": "student45@hipapp.de",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 170,
      "email": "testapp@t.com",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 38,
      "email": "nilakshi@mail.uni-paderborn.de",
      "firstName": "Nilakshi_UPB",
      "lastName": "Naphade",
      "role": "Student",
      "studentDetails": null,
      "fullName": "Nilakshi_UPB Naphade"
    },
    {
      "id": 179,
      "email": "student124@hipapp.de",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 175,
      "email": "testmail@testapp.de",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 117,
      "email": "neelakshi@gmail.com",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 185,
      "email": "test123@patrick-robrecht.de",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 155,
      "email": "neelakshinaphade@yahoo.com",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 174,
      "email": "sam@hipapp.com",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 53,
      "email": "neelakshinaphade@gmail.com",
      "firstName": "Nilakshi_GMAIL",
      "lastName": "Naphade",
      "role": "Student",
      "studentDetails": null,
      "fullName": "Nilakshi_GMAIL Naphade"
    },
    {
      "id": 22,
      "email": "nagaraj@mail.com",
      "firstName": "null",
      "lastName": "null",
      "role": "Student",
      "studentDetails": null,
      "fullName": "null null"
    },
    {
      "id": 176,
      "email": "test@gmail.com",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    },
    {
      "id": 169,
      "email": "testapp@gmail.com",
      "firstName": null,
      "lastName": null,
      "role": "Student",
      "studentDetails": null,
      "fullName": " "
    }
  ],
}

它的学生'列表,我在UI上使用GET API表示不满。我正在使用角度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;
  }
}

使用此管道,我可以根据firstName,lastName和email字段对数据进行排序。但是,我无法根据嵌套属性对记录进行排序。纪律,currentDegree和currentSemester。以下是我称之为此排序管道的HTML模板:

<table>
      <thead>
        <tr>
          <th (click)="sort('lastName')">{{ 'last name' | translate }}</th>
          <th (click)="sort('firstName')">{{ 'first name' | translate }}</th>
          <th (click)="sort('email')">{{ 'email' | translate }}</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of students | hipUsersFilter: query: selectedOption: selectedRole | hipUsersSorter: key: direction
                  | paginate: { id: 'server', itemsPerPage: 10, currentPage: _page, totalItems: _total }">
          <td>{{ user.lastName }}</td>
          <td>{{ user.firstName }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.studentDetails.discipline }}</td>
          <td>{{ user.studentDetails.currentDegree }}</td>
          <td>{{ user.studentDetails.currentSemester }}</td>
        </tr>
      </tbody>
    </table>

这是我在组件中的排序功能:

direction = -1;

sort(value: string) {
    this.direction = this.direction * -1;
    this.key = value;
}

如何根据这些嵌套字段对数据进行排序?有人可以就此问题提供意见吗? 提前致谢

0 个答案:

没有答案