Quiero usar la tabla de material angular. Tengo una función, que me devuelve la matriz de ventas, lo que quiero mostrar. Esta función funciona bien, pero no puedo ver nada en mi mesa. Si visualizo las ventas con una tabla simple, funciona, así que tengo algunos problemas con la variable de la fuente de datos ...

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>
2
Adrienn Kocsis 23 nov. 2019 a las 18:24

1 respuesta

La mejor respuesta

Cambie [dataSource] = "dataSource" a `[dataSource] =" sales "

1
Nadhir Falta 23 nov. 2019 a las 15:46