typescript - La tabla de datos de Angular Material no muestra una fila

Estoy creando una lista de datos de ejemplo e implementando la tabla de datos aquí Material Data Table. La paginación que he usado tiene números, pero las filas mostradas están vacías. No sé por qué las filas no se están mostrando.

Aquí está mi código.

Componente.html

<div class="row mt-5 mat-elevation-z8">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
    <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>

        <!-- Generated Number Column -->
        <ng-container matColumnDef="generated_no">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Generated Number </th>
          <td mat-cell *matCellDef="let row"> {{row.generated_no}} </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]"></mat-paginator>
</div>

Componente.ts

export class CouponComponent implements OnInit {
  coupons: Coupon[] = [];

  displayedColumns = ['id', 'generated_no', 'name'];
  dataSource: MatTableDataSource<Coupon>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private couponService: CouponService,
    private formBuilder: FormBuilder
  ) { 
    this.dataSource = new MatTableDataSource(this.coupons)
  }

  ngOnInit() {
    this.getCoupons();
  }

  getCoupons(): void {
    this.couponService.getCoupons()
    .subscribe(coupons => this.dataSource.data = coupons);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}

y la salida es solo esta: la paginación tiene un número pero la tabla no muestra filas.

¿Olvidé incluir algo?

EDITAR:

El filtro también está funcionando, si escribo algo en el filtro, el número en la paginación cambia, así que eso significa que mi dataSource no está vacío.

Este es el contenido de HTML

OTRA EDICIÓN

Después de mirar esta Tabla de Datos de ejemplo, descubrí que está usando una dependencia 6.0.0. Así que ejecuté npm update en el directorio de mi proyecto para actualizar también mis dependencias, y así es como se ve.

package.json

pero mientras ejecutaba el ng serve me encontré con este error.

Respuesta #1

Creo que deberíamos impulsar el ciclo de detección de cambios de Angular después de inicializar la fuente de datos.

getCoupons(): void {
  this.couponService.getCoupons()
  .subscribe(coupons => {
    this.dataSource.data = coupons;
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.ref.markForCheck();
  });
}

importa ChangeDetectorRef e inclúyelo en tu constructor(private ref: ChangeDetectorRef)

Espero que esto ayude.