0 
import { Pipe, PipeTransform } from '@angular/core';
import { courses } from '../interface/courses';

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {
  transform(value: Array<courses>, args: any[]): Array<courses> {
    const sortField = args[0];
      const sortDirection = args[1];
      let multiplier = 1;

       if (sortDirection === 'desc') {
         multiplier = -1;
        }
        
      value.sort((a: any, b: any) => {
  
       if (a[sortField] < b[sortField]) {
            return -1 *multiplier ;
       } else if (a[sortField]> b[sortField]) {
         return 1 *multiplier;
       } else {
         return 0;
        }       
    });

    return value;
  }  
}

这是我用于我的应用程序的排序管道，我需要从下面的接口列表中传递 sortFiled类别作为参数

export interface courses {
  courseId?: number;
  trainingPlatform: string;
  courseName: string;
  platformName: string;
  courseUrl: string;
  learningHours: number;
  courseAssignment: {
    assignmentId: number;
    userId: string;
    startDate: Date;
    endDate: Date;
    category: string;
    trainingType: string;
    courseId: number;
    courseStatus: string;
    completedDateTime: Date;
  };
}

我试图像这样通过courseAssignment.category和course.courseAssignment.category都没有工作需要一些帮助

<div class="container d-flex flex-column">
  <h1 class="pt-2 text-primary">My Courses</h1>
  <div class="d-flex flex-row justify-content-between">
    <form class="mt-3 pl-1 search_bar">
      <input
        class="form-control mr-sm-2"
        type="text"
        placeholder=" Search"
        aria-label="Search"
      />
    </form>
    <div>
      <button mat-raised-button class="m-2">Add Courses</button>
      <button mat-button mat-raised-button [matMenuTriggerFor]="menu">
        SortBy <i class="fas fa-sort-amount-down"></i>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item  (click)="onSortbyParam()">
        Mandatory
        </button>
        <button mat-menu-item (click)="onSortbyParam1()">
        Non-mandatory
        </button>
      </mat-menu>
    </div>
  </div>
  <div class="card m-2 " >
 <div *ngFor="let course of courseList|sort:[SortbyParam,SortDirection] index as i">
    <div class="card m-2">
      <div class="card-body d-flex flex-row row">
        <div
          class="
            col-4
            d-flex
            flex-row
            justify-content-center
            align-items-center
            col-12 col-sm-4
          "
        >
          <img
            src="https://www.plm.automation.siemens.com/media/global/en/Artificial-Intelligence-AI-Automotive-AT_tcm27-91268.jpg"
            alt="image"
            class="image"
          />
        </div>

        <div class="col-6 col-sm-4">
          <h2 class="card-title">{{ course.courseName }}</h2>
          <h3 class="text-muted">
            Start Date: {{ " " + course.courseAssignment.startDate }}
          </h3>
          <h4>
            <strong>Days left</strong> :{{
              calculateDiff(course.courseAssignment.endDate)
            }}
          </h4>
          <br />
          <mat-checkbox
            (click)="setStatusOfUser(course.courseId)"
            [checked]="course.courseAssignment.courseStatus == 'Completed'"
            [disableRipple]="true"
            >Mark as Completed</mat-checkbox
          >
          <br />
          <p class="card-text">{{ course.trainingPlatform }} Platform</p>
          <br />
        </div>
        <div
          class="
            d-flex
            flex-column
            justify-content-center
            align-items-center
            col-6 col-sm-4
          "
        >
          <p class="text-uppercase" style="color: #ff0000">
            {{ " " + course.courseAssignment.category }}
          </p>
          <h3 class="text-muted mt-3">
            End Date: {{ " " + course.courseAssignment.endDate }}
          </h3>
          <div
            *ngIf="course.courseAssignment.courseStatus === 'Completed'"
            class="text-muted"
          >
            completed Date:
            {{ course.courseAssignment.completedDateTime | date }}
          </div>

          <div
            *ngIf="course.courseAssignment.courseStatus === 'Completed'"
            class="mt-2"
          >
            <a href="https://talent.capgemini.com/">View Certificate</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

当我点击按钮时，我在 TS 文件中设置了这样的参数，但它不起作用。

onSortbyParam() {
    this.SortbyParam = 'courses.courseAssignment.category';
    this.SortDirection = 'asc';
    console.log(this.SortbyParam);
  }

  onSortbyParam1() {
    this.SortbyParam = 'courses.courseAssignment.category';
    this.SortDirection = 'desc';
    console.log(this.SortbyParam);
  }
4

1 回答 1

0

使用这个答案

您必须按句点拆分字符串，然后迭代地访问每个节点。这可以通过简单的减少来完成

因此，在您的代码中，当您尝试达到要排序的值时，您可以使用它：

value.sort((a: any, b: any) => {  
    if (getSortProperty(a) < getSortProperty(b)) {
         return -1 *multiplier 
.
.
.

function getSortProperty(item) {
    return sortField.split('.').reduce(function(node,prop) { return node[prop] }, item);
}

但同样在您的 HTML 代码中，您需要将 sortField 更改为：

this.SortbyParam = 'courses.courseAssignment.category';

至：

this.SortbyParam = 'courseAssignment.category';

由于您正在从数组的一项访问该属性，该数组本身已经是一个课程元素。

于 2021-11-27T14:59:16.260 回答