Angular 8排序指令数字排序失效问题及解决方案咨询

Let's break down why your numeric sorting isn't working and fix it while keeping a single directive that handles both string and numeric columns.

Key Issues in Your Original Code #

1. Input Type Mismatch: Your sortNumber input is typed as number, but you're passing string property keys like 'diskSize' from the template. This breaks how you access the numeric values in your sort logic.
2. Mixed Sort Logic: You’re running both string and numeric comparisons for every sort, regardless of the column type. Numeric columns were getting overridden by the string comparison checks first, which completely broke their sorting behavior.
3. Unintended Array Mutation: You were sorting the original data array directly (since tempArray was just a reference to this.data), which can cause unexpected side effects in your parent component.

Modified Sort Directive Code #

Here’s the fixed version that handles both string and numeric sorting correctly:

import { Directive, ElementRef, Renderer2, Input, OnInit } from '@angular/core';

@Directive({ selector: '[sortColumn]' })
export class SortDirective implements OnInit {
  @Input() data: any[];
  @Input('sortKey') stringSortKey: string; // For string-based columns
  @Input('sortNumber') numericSortKey: string; // For numeric columns (kept your original template alias)
  private isAscending = false; // Renamed for clearer intent

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    this.renderer.listen(this.el.nativeElement, 'click', () => {
      if (this.data && (this.stringSortKey || this.numericSortKey)) {
        this.sortArray();
      }
      this.isAscending = !this.isAscending;
    });
  }

  private sortArray(): void {
    // Create a copy of the array to avoid mutating the original data source
    const sortedData = [...this.data];

    sortedData.sort((a, b) => {
      // Handle string sorting if a string key is provided
      if (this.stringSortKey) {
        const strA = a[this.stringSortKey].toLowerCase();
        const strB = b[this.stringSortKey].toLowerCase();
        return this.isAscending 
          ? strA.localeCompare(strB) 
          : strB.localeCompare(strA);
      } 
      // Handle numeric sorting if a numeric key is provided
      else if (this.numericSortKey) {
        const numA = Number(a[this.numericSortKey]);
        const numB = Number(b[this.numericSortKey]);
        return this.isAscending 
          ? numA - numB 
          : numB - numA;
      }
      return 0;
    });

    // Update the original array with sorted values (preserves reference for template binding)
    this.data.splice(0, this.data.length, ...sortedData);
  }
}

What Changed & Why #

• Fixed Input Types: numericSortKey is now typed as string to match the property keys you pass from the template.
• Split Sort Logic: The directive now checks which type of column it’s handling (string vs numeric) and runs only the relevant comparison logic. No more conflicting checks breaking numeric sorting.
• Robust String Handling: Used localeCompare instead of manual string checks for better support of special characters and locale-specific sorting.
• Safe Numeric Conversion: Number() works for both actual number values and string-formatted numbers (e.g., '8' → 8).
• Avoided Mutation: We create a copy of the array before sorting, then replace the original array’s content to keep the reference intact (so your template updates automatically).

Your Template Remains Unchanged #

You don’t need to modify your existing HTML—since we kept the sortNumber alias for the numeric input, your current template will work as-is:

<thead class="bg-primary text-white">
  <th sortColumn [sortKey]="'name'" [data]="vms">VM Name</th>
  <th sortColumn [sortKey]="'ipAddress'" [data]="vms">IP Address</th>
  <th sortColumn [sortNumber]="'diskSize'" [data]="vms">Disk Size</th>
  <th sortColumn [sortNumber]="'cpu'" [data]="vms">CPU</th>
  <th sortColumn [sortNumber]="'ram'" [data]="vms">Ram</th>
  <th sortColumn [sortKey]="'imageUrl'" [data]="vms">Image Url</th>
  <th sortColumn [sortKey]="'role'" [data]="vms">Role</th>
  <th sortColumn [sortKey]="'status'" [data]="vms">Status</th>
  <th sortColumn [sortKey]="'project'" [data]="vms">Project Name</th>
  <th sortColumn [sortKey]="'hypervisor'" [data]="vms">Hypervisor Name</th>
</thead>

Quick Note for Edge Cases #

If your numeric columns might contain non-numeric values, add a check for NaN in the numeric sort logic to avoid unexpected behavior:

// Inside the numeric sort block
if (isNaN(numA) || isNaN(numB)) {
  return 0; // Or handle invalid values as needed
}

内容的提问来源于stack exchange，提问作者Arzu Suleymanov