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">