Angular Data table not being filled with response object from API-CodePudding

I'm trying to fill my data Table using an API call to get my data. However it doesn't seem to wanna fill my table even though in a console.log it show the response like so:

Here is the code that I use to try and fill my table:

this.beheerService.getAccessPoints().subscribe((result => {
  if (!result) {
    return;
  }

  console.log(result);
  this.dataSource = new MatTableDataSource(result);
}))

And as requested the template code:

<div id="tableContainer">
  <h1 >
    <fa-icon [icon]="faTicketAlt"></fa-icon> Xirrus Accesspoints
  </h1>
  <div >
    <table mat-table [dataSource]="dataSource" matSort>
      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let row"> {{row.name}} </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, 25, 100]" aria-label="Select page of users"></mat-paginator>
  </div>
</div>

I can't figure out where its going wrong I hope someone could shed some light and help me out.

CodePudding user response：

I believe you need to set your data source as follows:

dataSource = new MatTableDataSource();

and then in your subscription function

this.dataSource.data = response;

Can you also confirm you have [dataSource]="dataSource" in the table tag in your template - see this basic example? I'd recommend adding your template code to your question.

CodePudding user response：

Ts :

export class ExampleComponent implements OnInit, AfterViewInit {

   dataSource: MatTableDataSource = new MatTableDataSource([]);
   isDataSourceLoaded = false;

   constructor(
    private dataService: DataService
   ) { }

   ngOnInit(): void {

    this.getData();
   }

  ngAfterViewInit(): void {

      if (this.isDataSourceLoaded === false) {
        this.getData();

        if (this.dataSource.data.length !== 0) {
          this.isDataSourceLoaded = true;
        } else {
          this.isDataSourceLoaded = false;
        }
      }


  }


  getData(): void {

    this.dataService.getData().subscribe((result => {
       if (!result) {
         return;
       }

       this.dataSource = new MatTableDataSource(result);
    }));

    if (this.dataSource.data.length === 0) {
      this.isDataSourceLoaded = false;
    }

  }

}

Html :

<table mat-table [dataSource]="dataSource" >
  ...
</table>

CodePudding user response：

This can happen because of changeDetection: ChangeDetectionStrategy.OnPush.

You receive data but it cannot be detected outside subscription because you probably dont force change detection.

Try importing import { ChangeDetectorRef } from '@angular/core';

insert it in costructor constructor (private ref: ChangeDetectorRef) {}

and force change detection like below

this.beheerService.getAccessPoints().subscribe((result => {
  if (!result) {
    return;
  }

  this.dataSource = new MatTableDataSource(result);
  this.ref.detectChanges(); <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
}))
console.log(this.dataSource); // log dataSource from outside the subscription and see if it has data