角度材質テーブルで未定義の 'template'プロパティを読み取ることができません

Question

角度のある材質のテーブルコードです。

<div class="example-container mat-elevation-z8"> 
    <div> 
    <div class="example-header"> 
     <mat-form-field floatPlaceholder="never"> 
     <input matInput #filter placeholder="Filter users"> 
     </mat-form-field> 
     <button mat-icon-button color="accent" (click)="create()"> 
      <mat-icon aria-label="Example icon-button with a add icon">add_circle</mat-icon> 
     </button> 
    </div> 
    <div> 
    </div> 
    </div> 
<mat-table > 

     <ng-container matColumnDef="BloodPressure"> 
     <mat-header-cell> BloodPressure </mat-header-cell> 
     <mat-cell *ngFor="let visit"> {{ visit?.bloodpressure }} </mat-cell> 
     </ng-container> 

     <ng-container matColumnDef="UserName"> 
     <mat-header-cell> UserName </mat-header-cell> 
     <mat-cell *ngFor="let visit"> {{ visit?.username }} </mat-cell> 
     </ng-container> 

     <ng-container matColumnDef="Height"> 
     <mat-header-cell > Height </mat-header-cell> 
     <mat-cell *ngFor="let visit"> {{ visit?.height }} </mat-cell> 
     </ng-container> 

     <ng-container matColumnDef="Weight"> 
     <mat-header-cell > Weight </mat-header-cell> 
     <mat-cell *ngFor="let visit"> {{ visit?.weight }} </mat-cell> 
     </ng-container> 

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

また、MatTableDataSourceをインポートできません。エラーを表示

は

は、それが将来的にので、あなたのcomponent.tsファイルを見ることなく知ることは難しい、事前

Answer 1

にありがとうの変更を提案してくださいコードを更新

です私はあなたのポストとあなたのバージョン番号にそれを含めます。

あなたMatTableDataSourceインポートする必要があります：import {MatTableModule} from '@angular/material/table';ここで定義されているように：https://material.angular.io/components/table/api

それはあなたが持っているもののバージョンに依存しますけど。 @angularフォルダを確認し、ディレクトリがあることを確認します。

また、データソースをテーブルにインポートしているように見えません。 htmlファイルのテーブル要素は次のようになります。 <mat-table #table [dataSource]="dataSource">ここで、"dataSource"は、テーブルにバインドするデータストリームです。これはあなたのcomponent.tsファイルで宣言されています。

MatTableはCDKデータテーブルを拡張していますが、このリンクでデータソースがどのように機能するかについての簡単な情報もあります。 https://material.angular.io/guide/cdk-table