Question

我的html中没有任何ngif，而且分页器和过滤器都可以正常工作。

显示排序按钮，但不起作用。

mat-sort在引入动态数据之前已经起作用。

该表的html代码：

 <mat-form-field>
<input matInput  (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>

<table mat-table  [dataSource]="dataSource" [hidden]="!dataSource" class="mat-elevation-z8 " matSort> //the hidden is to make sure that table is rendering 

        <ng-container matColumnDef="Restaurant_Name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Restaurant Name </th>
          <td mat-cell *matCellDef="let element"> {{element.ID}} </td>
        </ng-container>


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


        <ng-container matColumnDef="Order_Type"  >
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Order Type </th>
          <td mat-cell *matCellDef="let element"> {{element.Order_Type}} </td>
        </ng-container>



        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

包含所有mat表详细信息的ts文件：

  public subscription: Subscription;
  public USER_DATA: UserOrder[]=[];
  @ViewChild(MatSort, {static: true}) sort: MatSort;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator
  displayedColumns: string[] = ['Restaurant_Name','Date','Order_Type']


 ngOnInit() {

this.subscription= this.observableService.observableNum
.subscribe(num => {
  console.log("num",num)
  this.userId=num;

  this.Userhttp.getUserOrder(num).subscribe((data:any)=>{

    this.USER_DATA = data;
    console.log("USer_DATA:",this.USER_DATA)
    this.dataSource = new MatTableDataSource(this.USER_DATA);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort

  })

我真的需要完成此工作，我在stackoverflow上尝试了所有解决此问题的方法，但是没有任何效果

Answer 1

您需要为数据源提供 MatSort ：

this.dataSource.sort = this.sort

但是请注意，您必须在 AfterViewInit 中执行此操作，因为this.sort来自您的模板。

为什么matsort不起作用（角材料）？

1 个答案: