I am trying to add an Angular Material Table to my page. I get the data from Flask with an http request in my component.ts file:

  onl oading: boolean = true;
  dataSource: any;
  displayedColumns: string[] = ['inchiKey', 'schemblID', 'smiles', 'patentID']
  
  constructor(private rs: RestService) { }

ngOnInit(): void {
    this.getdatabyMol()
  }

  getdatabyMol() {
    this.rs.getoutputMol().subscribe({
      next: (res:any) => this.dataSource = new MatTableDataSource<outputMol>(res[0]),
      error: (e) => console.log("No data found"   e),
      complete: () => this.onLoading = false
    })
  }

The outputMol class looks like this:

export interface outputMol {
    inchiKey: string;
    schemblID: string;
    smiles: string;
    patentID: string;
}

My component.html file looks like this:

<div *ngIf="onLoading===false">
    <table mat-table [dataSource]="dataSource"  #molTable>
        <!-- inchiKey Column -->
        <ng-container matColumnDef="inchikey">
          <th mat-header-cell *matHeaderCellDef> inchiKey </th>
          <td mat-cell *matCellDef="let element"> {{element.inchiKey}} </td>
        </ng-container>
      
        <!-- surechembl ID Column -->
        <ng-container matColumnDef="schemblID">
          <th mat-header-cell *matHeaderCellDef> Surechembl ID </th>
          <td mat-cell *matCellDef="let element"> {{element.schemblID}} </td>
        </ng-container>
      
        <!-- smiles Column -->
        <ng-container matColumnDef="smiles">
          <th mat-header-cell *matHeaderCellDef> smiles </th>
          <td mat-cell *matCellDef="let element"> {{element.smiles}} </td>
        </ng-container>
      
        <!-- patent ID Column -->
        <ng-container matColumnDef="patentID">
          <th mat-header-cell *matHeaderCellDef> Patent ID </th>
          <td mat-cell *matCellDef="let element"> {{element.patentID}} </td>
        </ng-container>
      
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

When I try to execute the page, I get the following error: ERROR Error: Could not find column with id "inchiKey".

If I console.log the dataSource I get this:

Console log of the dataSource

Please help, I don't know where the error is.

CodePudding user response：

There is a typo in you html it should be matColumnDef="inchiKey" instead of matColumnDef="inchikey".So the coulmn def would be

    <!-- inchiKey Column -->
    <ng-container matColumnDef="inchiKey">
      <th mat-header-cell *matHeaderCellDef> inchiKey </th>
      <td mat-cell *matCellDef="let element"> {{element.inchiKey}} </td>
    </ng-container>

Instead of

 <!-- inchiKey Column -->
        <ng-container matColumnDef="inchikey">
          <th mat-header-cell *matHeaderCellDef> inchiKey </th>
          <td mat-cell *matCellDef="let element"> {{element.inchiKey}} </td>
        </ng-container>