3

使用 Ajax 从后端获取值后，排序和分页不起作用。

我正在使用以下版本：

角度：5.2.7 材质：5.2.4 打字稿：2.5.3

我的代码片段：

<div class="form-created-by-me-header">
        <mat-form-field>
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
    </div>

    <div class="form-created-by-me-container mat-elevation-z8">

        <mat-table [dataSource]="dataSource" matSort>

            <!-- ID Column -->
            <ng-container matColumnDef="id">
                <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
            </ng-container>

            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
            </ng-container>

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

        <mat-paginator [pageSizeOptions]="[1, 5, 10, 25, 100]"></mat-paginator>

    export class FormCreatedByMeComponent {

      cratedFormsByMe: Array<SurveyForm>;
      dataSource: MatTableDataSource<SurveyForm> = new MatTableDataSource();


      public displayedColumns = ['id', 'name', 'description', 'questionCount', 'sharedWith', 'createdBy', 'createdDate', 'editBtn', 'deleteBtn'];

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;

      constructor(private formService: SurveyFormService) {
        this.getCreatedFormsByMe();
      }

      private getCreatedFormsByMe(): void {
        this.formService.getCreatedFormsByMe().subscribe(
          cratedFormsByMe => {
            this.cratedFormsByMe = cratedFormsByMe;
            this.dataSource = new MatTableDataSource(this.cratedFormsByMe);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
          });
      }


      applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
        this.dataSource.filter = filterValue;
      }

    }

在上述情况下，什么都没有发生。如果我遗漏任何东西，请纠正我。

4

3 回答 3

5

我通过在 paginator 和 sorter 周围添加超时解决了这个问题：

setTimeout(() => {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
});
于 2018-03-12T07:38:46.907 回答
0

扩展 trichetriche 的答案，我不得不在订阅中添加那段代码

ngOnInit() {
 //...
 //...
 //myData is an Observable
 this.myData.subscribe(data => {
  setTimeout(() => {
    this.dataSource.sort = this.sort;
  });
 });
}
于 2018-05-14T16:57:36.577 回答
0

当心。@ViewChild 不会被角度分配，直到ngAfterViewInit被调用。

请不要使用setTimeout，因为这不是您应该在数据源中设置排序和分页的方式。

所以，在你的情况下：

export class FormCreatedByMeComponent implements AfterViewInit {

  cratedFormsByMe: Array<SurveyForm>;
  dataSource: MatTableDataSource<SurveyForm> = new MatTableDataSource();


  public displayedColumns = ['id', 'name', 'description', 'questionCount', 'sharedWith', 'createdBy', 'createdDate', 'editBtn', 'deleteBtn'];

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private formService: SurveyFormService) {
    
  }

  ngAfterViewInit(): void { 
    // When this method is called, you'll surely have sort and pagination
    this.getCreatedFormsByMe();
  }

  private getCreatedFormsByMe(): void {
    this.formService.getCreatedFormsByMe().subscribe(
      cratedFormsByMe => {
        this.cratedFormsByMe = cratedFormsByMe;
        this.dataSource = new MatTableDataSource(this.cratedFormsByMe);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      });
  }


  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

}
于 2021-09-20T16:07:54.950 回答