Angular项目中matSort在mat-table内无法生效的问题求助

Here are the key issues in your code and their corresponding fixes:

1. Missing mat-sort-header Directive #

Only your "Company Name" column has the mat-sort-header attribute. For other columns to be sortable, you need to add this directive to their header cells.

2. Mismatched Sort IDs and Data Properties #

Your matColumnDef values use spaces (like "Company Name") which don't match the actual data property names (like companyName). matSort uses the sort ID to identify which field to sort, so you need to align these values.

Fix HTML Columns #

Rename matColumnDef to use camelCase matching your data properties, and add mat-sort-header to all sortable columns:

<div class="container mt-4">
  <mat-card>
    <mat-card-header></mat-card-header>
    <mat-card-content>
      <table matSort mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <!-- Company Name Column -->
        <ng-container matColumnDef="companyName">
          <th mat-sort-header mat-header-cell *matHeaderCellDef>Company Name</th>
          <td mat-cell *matCellDef="let element">{{ element.companyName }}</td>
        </ng-container>

        <!-- Industry Column -->
        <ng-container matColumnDef="industryName">
          <th mat-sort-header mat-header-cell *matHeaderCellDef>Industry</th>
          <td mat-cell *matCellDef="let element">{{ element.industryName }}</td>
        </ng-container>

        <!-- Office Premisis No. Column -->
        <ng-container matColumnDef="officePremisisNo">
          <th mat-sort-header mat-header-cell *matHeaderCellDef>Office Premisis No.</th>
          <td mat-cell *matCellDef="let element">
            {{ element.officePremisisNo }}
          </td>
        </ng-container>

        <!-- Mobile No. Column -->
        <ng-container matColumnDef="primaryMobileNo">
          <th mat-sort-header mat-header-cell *matHeaderCellDef>Mobile No.</th>
          <td mat-cell *matCellDef="let element">
            {{ element.primaryMobileNo }}
          </td>
        </ng-container>

        <!-- Details Column -->
        <ng-container matColumnDef="details">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let element">
            <a (click)="onClick(element.id)">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                x="0px"
                y="0px"
                width="30"
                height="30"
                viewBox="0 0 48 48"
              >
                <path
                  fill="#2196f3"
                  d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"
                ></path>
                <path
                  fill="#fff"
                  d="M22 22h4v11h-4V22zM26.5 16.5c0 1.379-1.121 2.5-2.5 2.5s-2.5-1.121-2.5-2.5S22.621 14 24 14 26.5 15.121 26.5 16.5z"
                ></path>
              </svg>
            </a>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayColumns"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 15, 20]"
        showFirstLastButtons
      ></mat-paginator>
    </mat-card-content>
    <mat-card-footer>
      
    </mat-card-footer>
  </mat-card>
</div>

3. Update displayColumns Array #

Match the displayColumns array in your TS code to the new camelCase matColumnDef names:

public displayColumns: string[] = [
  'companyName',
  'industryName',
  'officePremisisNo',
  'primaryMobileNo',
  'details',
];

4. Assign Sort and Paginator After View Initialization #

@ViewChild elements (like MatSort and MatPaginator) are only available after the view is fully initialized. Move their assignment to ngAfterViewInit instead of setting them inside the subscribe callback:

export class Table5Component implements OnInit, AfterViewInit {
  public dataSource = new MatTableDataSource();

  public displayColumns: string[] = [
    'companyName',
    'industryName',
    'officePremisisNo',
    'primaryMobileNo',
    'details',
  ];
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;


  constructor(private companyService: CompanyService) {}

  ngOnInit()  {
    this.CompanyList();
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  CompanyList = () => {
    this.companyService.getCompany('addCompany').subscribe((data) => {
      console.log(data);
      this.dataSource.data = data;
    });
  };

  onClick = (id: any) => {
    alert(id);
  };
}

5. Verify Module Imports #

Ensure MatSortModule, MatTableModule, and MatPaginatorModule are imported in your component's module:

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    // ... other imports
    MatTableModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class YourModule { }

These changes should resolve the sorting issue. The key fixes are aligning sort IDs with your data properties, adding mat-sort-header to all sortable columns, and assigning sort/paginator after the view is initialized.

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