角材料未对表中的数字进行排序

Question

我正在尝试使用 AngularMaterial API 对 Angular 中的表进行排序。 出于某种原因，它适用于字符串，但不适用于对数字进行排序。 在我的表中，我得到的输出是： 1 , 10, 2, 3, 4, 5, 6 而不是：1, 2, 3, 4, 5, 6, 10 前端 = Angular，服务器 = Java Spring Boot，数据库 = MySQL。

JavaScript

      sortData(sort: Sort) {
    const data = this.sortedData.slice();

    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }

    this.sortedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'accountKey':
          console.log('Switch A= '+a.accountKey + ', Switch B= '+b.accountKey);
        return this.compare(a.accountKey, b.accountKey, isAsc);

        case 'accountName': return this.compare(a.accountName, b.accountName, isAsc);
        case 'idNumber': return this.compare(a.idNumber, b.idNumber, isAsc);
        case 'telephone1': return this.compare(a.telephone1, b.telephone1, isAsc);
        case 'accountType': return this.compare(a.accountType, b.accountType, isAsc);
        case 'ishurNikuiMakor': return this.compare(a.ishurNikuiMakor, b.ishurNikuiMakor, isAsc);
        case 'connectPerson': return this.compare(a.connectPerson, b.connectPerson, isAsc);
        case 'mail': return this.compare(a.mail, b.mail, isAsc);
        case 'address': return this.compare(a.address, b.address, isAsc);
        case 'state': return this.compare(a.state, b.state, isAsc);
        default: return 0;
      }
    });
  }

      compare(a: number | string, b: number | string, isAsc: boolean) {
    console.log('Compare A= '+a+' ,Compare B= '+b+', Compare A<B? = '+(a<b));
    console.log('');
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }

HTML

    <table matSort (matSortChange)="sortData($event)" matSortDisableClear>
  <thead>
    <tr>
      <th mat-sort-header="state" scope="col">מדינה</th>
      <th mat-sort-header="address" scope="col">יישוב</th>
      <th mat-sort-header="mail" scope="col">דוא"ל</th>
      <th mat-sort-header="connectPerson" scope="col">איש קשר</th>
      <th mat-sort-header="ishurNikuiMakor" scope="col">אישור נ.ק</th>
      <th mat-sort-header="accountType" >סוג חשבון</th>
      <th mat-sort-header="telephone1" scope="col">טל' ראשי</th>
      <th mat-sort-header="idNumber" scope="col">ח.פ/ת.ז</th>
      <th mat-sort-header="accountName" scope="col">שם</th>
      <th mat-sort-header="accountKey" scope="col">מספר</th>
      <th scope="col">פעולה</th>

    </tr>
  </thead>

  <tbody id="myTable">
    <tr *ngFor="let heshbon of sortedData | searchfilter:searchValue:categoryModel.name">

      <td data-label="מדינה">{{ heshbon.state }}</td>
      <td data-label="יישוב">{{ heshbon.address }}</td>
      <td data-label="דוא''ל">{{ heshbon.mail }}</td>
      <td data-label="איש קשר">{{ heshbon.connectPerson }}</td>
      <td data-label="אישור נ.ק">{{ heshbon.ishurNikuiMakor }}</td>
      <td data-label="סוג חשבון">{{ heshbon.accountType }}</td>
      <td data-label="טל' ראשי">{{ heshbon.telephone1 }}</td>
      <td data-label="ח.פ/ת.ז">{{ heshbon.idNumber }}</td>
      <td data-label="שם">{{ heshbon.accountName }}</td>
      <td data-label="מספר">{{ heshbon.accountKey }}</td>
      <td data-label="מחיקה"><button class="deleteButton" (click)="deleteHeshbon(heshbon.id)"> מחק חשבון </button></td>
  </tbody>
</table>