Angular - предоставленный источник данных не соответствует массиву, наблюдаемому или источнику данных

Question

Я получаю объект в моем компоненте через @ Input

@ Событие ввода

теперь мне нужно использовать массив затрат в моей угловой таблице материалов.

<div class="table-container" *ngIf="event">
    <table mat-table [dataSource]="event" class="mat-elevation-z8">

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

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

Но я получаю ошибку:

при условии, что источник данных не соответствует массиву, наблюдаемому или источнику данных

Answer 1

dataSource, предоставленный для mat-table, не является массивом, из-за которого вы видите эту ошибку.

Самый простой способ предоставить данные для mat-table - этоПередача массива данных на вход dataSource таблицы.

Поскольку ваш массив expenses находится в объекте события, вам нужно передать event.expenses в таблицу как dataSource.

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