Angular Material table datasource problem

Question

I want to use Angular Material table. I've got a function, which gives me back the sales array, what I want to display. This function works fine, but I can't see anything on my table. If I diplay the sales with a simple table, it works, so I got some problems with the datasource variable...

export class SaleListingComponent implements OnInit {
constructor(private saleService: SaleDomainService, private router:Router) { }

  public sales: Sale[];
  dataSource=this.sales;

  ngOnInit() {
    this.loadSales();

  }

  private loadSales() {
    this.saleService.getSales().subscribe(
      data => { this.sales = data },
      err => console.error(err),
      () => console.log("sales loaded.", JSON.stringify(this.sales))      
    );

  } 
}

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

    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef> amount </th>
      <td mat-cell *matCellDef="let element"> {{element.amount}} </td>
    </ng-container>

    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef> date </th>
      <td mat-cell *matCellDef="let element"> {{element.date}} </td>
    </ng-container>

    <ng-container matColumnDef="industry">
      <th mat-header-cell *matHeaderCellDef> industry </th>
      <td mat-cell *matCellDef="let element"> {{element.industry}} </td>
    </ng-container>

        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef> price </th>
          <td mat-cell *matCellDef="let element"> {{element.price}} </td>
        </ng-container>

    <ng-container matColumnDef="prod">
      <th mat-header-cell *matHeaderCellDef> prod </th>
      <td mat-cell *matCellDef="let element"> {{element.prod}} </td>
    </ng-container>

        <ng-container matColumnDef="productType">
          <th mat-header-cell *matHeaderCellDef> productType </th>
          <td mat-cell *matCellDef="let element"> {{element.productType}} </td>
        </ng-container>

        <ng-container matColumnDef="salesman">
          <th mat-header-cell *matHeaderCellDef> salesman </th>
          <td mat-cell *matCellDef="let element"> {{element.salesman}} </td>
        </ng-container>      

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

I added an answer can you please mark it as correct answer ? — Nadhir Falta
– Nadhir Falta, Commented Nov 23, 2019 at 15:46

Nadhir Falta · Accepted Answer · 2019-11-23 15:46:14Z

1

change [dataSource]="dataSource" to `[dataSource]="sales"

answered Nov 23, 2019 at 15:46

Nadhir Falta

5,2872 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material table datasource problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related