Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular material table not showing data

People who want paging and sorting on client side please refer this link

Here is what I tried. The data is loading in the console. but it is not displayed on the grid or mat table.

I don't have any error in the console. I am able to see the data in the console but the data is not loaded into the grid.

Can somebody tell me what am I doing wrong?

The actual database from where data is emitted out.

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();
    })


    }

Sort Function to sort the data

      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>

Service:

Forms Service has the below method which returns the forms list as observable

  getAllFormData(orderBy:string) {
    return this.af.list('/forms');
  }
like image 766
DEV Avatar asked Feb 18 '18 18:02

DEV


People also ask

How do you show no records found in angular material table?

How to show no records found in Mat Table Angular? Assuming this is your code where you are making the API call and creating the mat table data source. Now based on the dataSource being null or not you can show the table or no records message in your HTML file.

What is MatTableDataSource in angular?

By default, the MatTableDataSource sorts with the assumption that the sorted column's name matches the data property name that the column displays. For example, the following column definition is named position , which matches the name of the property displayed in the row cell.


1 Answers

Add an ngIf="dataSource" in the <mat-table> tag.

This problem occurs if the data is asynchronous. the DOM is getting loaded before the data is fetched.

Check the dataSource before rendering the DOM.

like image 169
Arjun Panicker Avatar answered Oct 21 '22 10:10

Arjun Panicker