将数据通过一个组件传递到另一个具有 Angular 材料表的组件的问题 - 未解决的变量

Question

所以我在 Angular 材料对话框上做一个购物车页面，我想在那里放置一个表格，但我在尝试将数据从我的数组传递到表格时遇到了困难。

我得到的主要错误是 HTML 上变量的双向绑定。 当我将数组变量放在那里时，它会显示未解析的变量。

这是我的数组：

这是我的汽车对话页面：

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
selector: 'app-cart-drum-page',
templateUrl: './cart-drum-page.component.html',
styleUrls: ['./cart-drum-page.component.css']
})
export class CartDrumPageComponent implements OnInit {


displayedColumns: string[] = ['Color'];// 'Material', 'Disposition', 'Stick Type', 'Brand'];
dataSource;

constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }

ngOnInit(): void {
  console.log(this.data);
  console.log(this.data.data[0].drumColorOrder);
this.dataSource = this.data;

}



}

：console.log(this.data.data[0].drumColorOrder); - 打印黄色，所以这是正确的路径。

这是表 HTML：

<p> {{dataSource.data[0].drumColorOrder}}</p>

  <ng-container matColumnDef="Color">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let data"> {{data.data[0].drumColorOrder}} </td>
  </ng-container>

<!--
  <ng-container matColumnDef="Material">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let data"> {{data.data[0]}} </td>
  </ng-container>


  <ng-container matColumnDef="Disposition">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let data"> {{data.data[0]}} </td>
  </ng-container>


  <ng-container matColumnDef="Stick Type">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let data"> {{data.data[0]}} </td>
  </ng-container>

  <ng-container matColumnDef="Brand">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let data"> {{data.data[0]}} </td>
  </ng-container>

  -->

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

主要问题是加载双向绑定的数据，因为出现那个错误。

谁能帮我？

Answer 1

确保你有打开表标签定义数据源，如果可以的话，我也会使用 mat-table 元素：

<mat-table [dataSource]="myDataSource">....