angular - 如何使用 Angular MatSort 和 MatTable

Question

我目前正在探索（和学习）Angular。我要做的是在表格上显示数据，然后在用户单击表格标题时对数据进行排序。我正在使用 MatTable 和 MatSort。

我在https://material.angular.io/components上阅读了这些材料

但是，我无法在我的桌子上进行排序。

这是我目前拥有的：

bom-comb-override-list.component.html

<table mat-table matSort [dataSource]="tableDataSrc" class="mat-elevation-z8">
        <ng-container matColumnDef="part_no">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> PART NO. </th>
            <td mat-cell *matCellDef="let element; let i = index"> 
                {{element.part_no}} 
                <input [(ngModel)]="tableDataSrc[i].user_priority" type="hidden" value="{{element.part_no}}">
            </td>
        </ng-container>

        <ng-container matColumnDef="site_id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> TEST SITE ID </th>
            <td mat-cell *matCellDef="let element; let i = index" class="center-text"> 
                {{element.site_id}} 
                <input [(ngModel)]="tableDataSrc[i].user_priority" type="hidden" value="{{element.site_id}}">
            </td>
        </ng-container>

        <ng-container matColumnDef="bom_id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> BOM_ID </th>
            <td mat-cell *matCellDef="let element; let i = index">
                {{element.bom_id}} 
                <input [(ngModel)]="tableDataSrc[i].user_priority" type="hidden" value="{{element.bom_id}}">
            </td>
        </ng-container>

        <ng-container matColumnDef="bom_comb">
            <th mat-header-cell *matHeaderCellDef > BOM COMB. # </th>
            <td mat-cell *matCellDef="let element; let i = index" class="center-text"> 
                <a [routerLink]="" (click)="_showData(element)" >{{element.bom_comb}}</a>

            </td>
        </ng-container>

        <ng-container matColumnDef="pkg_kit">
            <th mat-header-cell *matHeaderCellDef > PACKAGE KIT </th>
            <td mat-cell *matCellDef="let element; let i = index" class="center-text"> 
                {{element.pkg_kit}} 
            </td>
        </ng-container>

        <ng-container matColumnDef="user_priority">
            <th mat-header-cell *matHeaderCellDef> USER PRIORITY </th>
            <td mat-cell *matCellDef="let element; let i = index" class="center-text">
                 <!-- {{element.user_priority}}  -->
                <input [(ngModel)]="tableDataSrc[i].user_priority" class="form-control form-control-sm"
                    onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
                    type="number" min=0 value="{{element.user_priority}}">
            </td>
        </ng-container>

        <ng-container matColumnDef="final_priority">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> FINAL PRIORITY </th>
            <td mat-cell *matCellDef="let element; let i = index" class="center-text"> 
                {{element.final_priority}} 
                <input [(ngModel)]="tableDataSrc[i].user_priority" type="hidden" value="{{element.final_priority}}">
            </td>
        </ng-container>
    
        <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: tableColumns"></tr>
    </table>

bom-comb-override-list.component.ts

export class BomCombOverrideListComponent implements OnInit {
  @ViewChild(MatSort, {static: true}) sort: MatSort...



ngOnInit(): void {
    this.searchForm = this.formBuilder.group({
      inPartNum: ['', !Validators.required],
      inSiteId: ['', !Validators.required],
      inBomId: ['', !Validators.required]
    });
    this.listAll();
    this.dataSource = new MatTableDataSource<BomCombOverride>(this.tableDataSrc);
    this.dataSource.sort = this.sort;
  }

  listAll() {
    if(this.submitted) {
      var spinRef = this.spinner.start("Loading...");
      this.bomCombService.getList(this.part_num.trim(),this.site_id.trim(),this.bom_id.trim())
      .pipe(finalize(()=> this.spinner.stop(spinRef)))
      .subscribe(
        data => {        
          this.tableDataSrc = data;
        },error => this.message = error);
      }
  }

bom-com-override.service.ts

getList(partNo : string, 
  siteId : string, 
  bomId : string) : Observable<any> {

  let params = new HttpParams()
    .set('part_num', partNo)
    .set('site_id', siteId)
    .set('bom_id', bomId);

    // console.log(this.http.get(`${this.baseUrl}`, { params : params }));
    
  return this.http.get(`${this.baseUrl}`, { params : params });
}

你能给我你的见解吗？我错过了什么？

预先感谢您的意见。

标签： angularangular-material