angular - 在angular2中按类颜色排序

Question

我正在尝试根据单选按钮（element.IsOnline）的颜色对表格进行排序。我正在尝试按上次看到的日期排序，但即使格式似乎没问题，也没有排序。这就是为什么我试图用绿色或红色来做，但不知道我该怎么做。

我该怎么做？

我的.html

 <table mat-table [dataSource]="dataSource" matSort class=" mat-elevation-z8">


              <ng-container matColumnDef="online">
                <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
                <td mat-cell *matCellDef="let element">
                  <i *ngIf="element.isOnline" class="material-icons"
                    style="color: rgba(0, 100, 0, 0.80)">radio_button_checked</i>
                  <i *ngIf="!element.isOnline" class="material-icons"
                    style="color: rgba(190, 0, 0, 0.80)">radio_button_checked</i>
                </td>
              </ng-container>

 <ng-container matColumnDef="deviceName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Device Id </th>
                <td mat-cell *matCellDef="let element"> {{element.deviceName}} </td>
              </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let element; columns: displayedColumns;" (click)="goToDeviceDetails(element)">
              </tr>

 <ng-container matColumnDef="lastSeen">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Last seen </th>
                <td mat-cell *matCellDef="let element"> {{element.telemetryUtc | date: 'medium'}} </td>
              </ng-container>
            </table>

我的 .ts

import { Component, OnInit, OnDestroy, ViewEncapsulation, ViewChild } from "@angular/core";

import { MatSort } from '@angular/material/sort';

@Component({
  selector: "app-provisioned-list",
  templateUrl: "./provisioned-list.component.html",
  styleUrls: ["./provisioned-list.component.scss"],
  encapsulation: ViewEncapsulation.None,
  animations: fuseAnimations
})
export class ProvisionedListComponent implements OnInit, OnDestroy {
  deviceList: DeviceModel[];
  displayedColumns: string[] = ["checkbox", "online", "deviceName", "tags", "actualVersion", "status", "runningApps", "appVersion", "lastSeen"];

 @ViewChild(MatSort) sort: MatSort;
 devices: any;

private getDeviceList() {
    this.provisionedService.getProvisionedDevicesList().then(response => {
      this.deviceErrorMessage = null;
      this.dataSource.data = response;

this.dataSource.data.map(device => {
        this.provisionedService.getIsDeviceAlive(device._id).then(response => device.isOnline = response);

  }

标签： angular