CODEWITHSUNDEEP
javascriptangulartypescript
biillitil
biillitil

Reputation: 141

angular material Could not find column

I have the following code but I get this error for no reason:

ERROR Error: Could not find column with id "continent".

I already added the display column part so I am not sure why I am getting this error.

   <div class="example-container mat-elevation-z8">
   <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="continentName">
      <mat-header-cell *matHeaderCellDef>continentName </mat- 
    header-cell>
      <mat-cell *matCellDef="let country"> {{country.continentName}} </mat-cell>
    </ng-container>
        <ng-container matColumnDef="countryName">
          <mat-header-cell *matHeaderCellDef>countryName </mat-header-cell>
          <mat-cell *matCellDef="let country"> {{country.countryName}} </mat-cell>
        </ng-container>
            <ng-container matColumnDef="areaInSqKm">
              <mat-header-cell *matHeaderCellDef>areaInSqKm </mat-header-cell>
              <mat-cell *matCellDef="let country"> {{country.areaInSqKm}} </mat-cell>
            </ng-container>
                <ng-container matColumnDef="population">
                  <mat-header-cell *matHeaderCellDef>population </mat-header-cell>
                  <mat-cell *matCellDef="let country"> {{country.population}} </mat-cell>
                </ng-container>

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


    @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"]
   })
   export class AppComponent implements OnInit {
   title = "my-case-study";
   displayedColumns = 
   ['continentName','countryName','areaInSqKm','population'];
   dataSource = new MatTableDataSource([]);

Upvotes: 1

Views: 359

Answers (1)

Eliseo
Eliseo

Reputation: 57929

you forget th and td "mat-header" and "mat-cell" are directives of "th" and "td" e.g.

<ng-container matColumnDef="continentName">
    <th mat-header-cell *matHeaderCellDef>continentName </th>
        <td mat-cell *matCellDef="let country"> {{country.continentName}} </td>
</ng-container>

You only write

<ng-container matColumnDef="continentName">
   <!--here missing "th"-->
  <mat-header-cell *matHeaderCellDef>continentName </mat- 
header-cell>
  <!--here missing td-->
  <mat-cell *matCellDef="let country"> {{country.continentName}} </mat-cell>

Upvotes: 1

Related Questions