I am having trouble displaying data in a table. The data shows up when I display it in another element, but not in the table.
Here is my code:
<mat-accordion *ngIf="posts.length > 0">
<mat-expansion-panel *ngFor="let post of posts">
<mat-expansion-panel-header>
<mat-panel-title>
{{post.name}}
</mat-panel-title>
</mat-expansion-panel-header>
<p>{{ post.type}}</p>
</mat-expansion-panel>
</mat-accordion>
<table mat-table [dataSource]="posts" class="mat-elevation-z8" *ngIf="posts.length > 0">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name. </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="company">
<th mat-header-cell *matHeaderCellDef> Company </th>
<td mat-cell *matCellDef="let element"> {{element.company}} </td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> Type </th>
<td mat-cell *matCellDef="let element"> {{element.type}} </td>
</ng-container>
<ng-container matColumnDef="quantity">
<th mat-header-cell *matHeaderCellDef> Quantity </th>
<td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
</ng-container>
</table>
<p *ngIf="posts.length == 0" class="info-text mat-body-1">No Records added yet</p>
In my code, the data displays in the mat-accordion first, but does not show up in the table. Can anyone spot where I may be making a mistake?