Question

希望在客户端进行分页和排序的人请参阅this link

这是我尝试过的。数据正在控制台中加载。但它不会显示在网格或垫子表上。

我在控制台中没有任何错误。我能够在控制台中看到数据，但数据未加载到网格中。

有人可以告诉我我做错了什么吗？

发出数据的实际数据库。

export class FormsDatabase {

   formsList =  new BehaviorSubject([]);
    get data(){

      return this.formsList.value;
   }

 constructor(private _formsServicedata: FormsService){
    this._formsServicedata.getAllFormData('').subscribe((form)=>{
        console.log("Form DataSource: ");
    this.formsList.next(form);
  })
   }

}


export class FormDataSource extends DataSource<any>{

    constructor( private formsDb: FormsDatabase,public 
    paginator:MatPaginator , public sort: MatSort
    ) {
       super()        
      }

   connect():Observable<any>{
      const formsData=[
         this.formsDb.formsList ,
         this.sort.sortChange
    ];

     return Observable.merge(...formsData).map(()=>{
          this.getSortedData();
    })


    }

排序函数以对数据进行排序

      getSortedData(){

        const data = this.formsDb.data.slice();
       if(!this.sort.active || this.sort.direction==''){ return data;}

        return data.sort((a,b)=>{

        let propertyA:number|string='';
        let propertyB:number|string='';

    switch(this.sort.active)
    {
        case 'formname': [propertyA,propertyB]=
     [a.formname,b.formname];break;
        case 'displaytext': [propertyA,propertyB]=
     [a.displaytext,b.displaytext];break;
        case 'sortorder': [propertyA,propertyB]=
     [a.sortorder,b.sortorder];break;
    }

    let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
    let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

    return (valueA < valueB?-1:1)*(this.sort.direction=='asc'?1:-1);
   });
  }

       disconnect() { }

 }

HTML

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

      <ng-container matColumnDef="formname">
        <mat-header-cell *matHeaderCellDef mat-sort-header> FORM NAME 
     </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.formname}} 
    </mat-cell>
      </ng-container>


      <ng-container matColumnDef="displaytext">
        <mat-header-cell *matHeaderCellDef mat-sort-header> DISPLAY TEXT </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.displaytext}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="sortorder">
            <mat-header-cell *matHeaderCellDef mat-sort-header> SORT ORDER</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.sortorder}} </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 #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10, 20]"
                   [showFirstLastButtons]="true">
    </mat-paginator>
  </div>

服务：

Forms Service具有以下方法，该方法将表单列表作为observable

返回

  getAllFormData(orderBy:string) {
    return this.af.list('/forms');
  }

Answer 1

在ngIf="dataSource"标记中添加<mat-table>。

如果数据是异步的，则会出现此问题。在获取数据之前，DOM已加载。

在渲染DOM之前检查dataSource。

Answer 2

我重现你的代码，就像你一样，我不能使它像角度材料团队提供的例子那样工作，但是我使用了一种解决方法来使sort函数有效。

 export class FormDataSource extends DataSource<any> {

      constructor(private formsDb: FormsDatabase, public paginator: MatPaginator, 
        public sort: MatSort) {
        super();
        this.sort.sortChange.subscribe(t => 
          this.formsDb.formsList.next(this.getSortedData()));
      }

      connect(): Observable<any[]> {
        return this.formsDb.formsList;
      }
        getSortedData () {
          const data = this.formsDb.data.slice();
          if (!this.sort.active || this.sort.direction === '') {
            return data;
          }
          return data.sort((a, b) => {

            let propertyA: number | string = '';
            let propertyB: number | string = '';

            switch (this.sort.active) {
              case 'formname':
                [propertyA, propertyB] =
                  [a.formname, b.formname];
                break;
              case 'displaytext':
                [propertyA, propertyB] =
                  [a.displaytext, b.displaytext];
                break;
              case 'sortorder':
                [propertyA, propertyB] =
                  [a.sortorder, b.sortorder];
                break;
            }

            const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
            const valueB = isNaN(+propertyB) ? propertyB : +propertyB;

            return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
          });
        }

        disconnect() {
        }
      }

查看init之后

应用过滤器后

Answer 3

从示例https://material.angular.io/components/table/overview 您应该从其中删除tr元素。实施错误：

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

正确实施：

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

Answer 4

由于角度检测到变化的方式会发生此问题，有时不会发生变化，也不会触发重新渲染。

要解决此问题，请从ChangeDetectorRef导入'@angular/core'，将其注入组件constructor (cd: ChangeDetectorRef)，然后在对数据进行排序后使用它：

return Observable.merge(...formsData).map(()=>{
  this.getSortedData();
  this.cd.detectChanges(); // or this.cd.markForCheck() if detectChanges does not work.
})

角度材料表未显示数据

4 个答案: