html - Angular material table component not showing data

Question

I'm struggling to load data inside my angular material table. The columnheaders show as expected except there are now rows of data. The weird thing is that there is data in the data source that is used by the table. See the code (or images) below:

Object type to populate datasource

export default interface UserStripeTableResource {
    id: number;
    fullName: string;
    saldo: number;
    totalstripes: number;
} 

This is the interface used to populate the list for the table, no weird things I think.

Component (.ts file)

@Component({
  selector: 'app-admin-editsaldo',
  templateUrl: './admin-editsaldo.component.html',
  styleUrls: ['./admin-editsaldo.component.css']
})
export class AdminEditsaldoComponent implements OnInit {

  @Input() allusersstripes: UserStripeTableResource[];
  @Output() RefreshListOfUsers = new EventEmitter<any>();


  dataSource: MatTableDataSource<UserStripeTableResource> = new MatTableDataSource();
  dataDisplayedColumns: string[] = ['id', 'fullName', 'saldo', 'totalstripes'];

  selectedamount: number = null;

  constructor(
  ) { }

  ngOnChanges(changes: SimpleChange): void {
  }

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.allusersstripes);
    console.log(this.dataSource.data);
  }

The file that handles the logic for populating the table. As you can see the data is provided by a parent provider (see @input). The data is immediately assigned to the datasource in the ngOnInit. Also the columns are specified correctly, as they are shown on the html page.

HTML Page

<div *ngIf="dataSource">

    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

        <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

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

        <!-- Name Column -->
        <ng-container matColumnDef="fullName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Naam </th>
            <td mat-cell *matCellDef="let element"> {{element.fullName}} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="saldo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Saldo </th>
            <td mat-cell *matCellDef="let element"> {{element.saldo}} </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="totalstripes">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Totaal strepen </th>
            <td mat-cell *matCellDef="let element"> {{element.totalstripes}} </td>
        </ng-container>

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

</div>

The html page that should show the table. The columns match the names specified in the .ts file and are the same as the object properties.

Image showing html page with datasource log

Things that I already tried:

1. Double checking if every needed module was imported correctly.
2. Using ngIf before rendering the table, to make sure the datasource is populated before the table is being rendered.
3. Print out the datasource as JSON straight on html page, to double check if it is there before the table is rendered.
4. Try with the given example from angular material site itself, that's working (but it uses static data so not really comparable I guess)
5. Try ngIf on in parent component on child component, to make sure the async data is there before the component is actually rendered.

I'm really out of ideas, already struggling a couple a days on this. I really hope that someone can help me out :).

The html source (with no custom css source)

List of packages used

[email protected] E:Prive ProjectenCodingBrandfondsBrandfonds-Frontend
├── @angular-devkit/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @fortawesome/[email protected]
├── @full-fledged/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

question from:https://stackoverflow.com/questions/65853288/angular-material-table-component-not-showing-data

Answer 1

I reproduced your example in a stackblitz with the latest angular 11 version and it seems to work.

Edit:

ngOnInit gets calld once with null/undefined data because the http request is still in progress. The input data gets updated, but since there is no OnChanges interface implemented, the AdminEditsaldoComponent does nothing with the new data.

The solution is to either implement the OnChanges interface or to hide the AdminEditsaldoComponent in the parent component until you have loaded the data (<app-admin-editsaldo *ngIf="data" [allusersstripes]="data">...)