Problem with passing data trough one component to another that have a Angular Material Table - Unresolved variable

Question

So i am doing a cart page on a Angular Material Dialog, and i want to place a table there, but i am having dificulties trying to pass the data from my array to the table.

The main error that i getting is on the two way binding of the variable on the HTML. It says Unresolved variable when i place the array variable there.

This is my array:

This is My Car Dialog Page:

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;

}



}

The: console.log(this.data.data[0].drumColorOrder); - prints the color Yellow so this is the right Path.

This is the Table 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> 

The main problem is loading the data of the two way binding, because it appears that error.

Can anyone help me?

Answer 1

Make sure you have the opening table tag define the datasource, I would also use the mat-table element if you could:

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