javascript - 无法将数据传递到 Angular 材料数据表 - 未解决的变量

Question

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

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

图像 - 未解决的变量

这是我的数组：

图像阵列

---

这是我的汽车对话页面：

import { Inject } from '@angular/core';
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：

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


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

---

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

谁能帮我？

标签： javascripthtmlcssangular