angular - SortPipe 引き渡しパラメーター

Question

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);
  }