Missing definitions for header, footer, and row; can not determine which columns should be rendered. Angular DataTable

I'm trying to create a data table of Angular IO:

link

But I'm getting:

  

Missing definitions for header, footer, and row; can not determine   which columns should be rendered

<mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filtrar">
      </mat-form-field>

      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <div *ngFor="let custoFixo of custosFixos; let i = index"
        <!-- Name Column -->
        <ng-container matColumnDef="nome">
          <th mat-header-cell *matHeaderCellDef> Nome </th>
          <td mat-cell *matCellDef="let element"> {{custoFixo.nome}} </td>
        </ng-container>

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

        <!-- Symbol Column -->
        <ng-container matColumnDef="vencimento">
          <th mat-header-cell *matHeaderCellDef> Data Vencimento </th>
          <td mat-cell *matCellDef="let element"> {{custoFixo.vencimento_padrao}} </td>
        </ng-container>

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

Template:

export class ListagemprodutoComponent implements OnInit {

  dataSource: any;
  displayedColumns: string[] = ['nome', 'valor', 'vencimento'];

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

My data is received in OnInit:

this.dataSource = new MatTableDataSource(this.custosFixos);