1

最初の角材テーブルの作成が正常に完了しました。コンポーネントでデータソースを作成し、それをテーブルに追加すると、テーブルが適切にレンダリングされます。ただし、以下に示すように、テーブルは黒色でレンダリングされ、テキストは白色で表示されます

ここに画像の説明を入力

しかし、list.component.css にはスタイルを追加しませんでした。styles.css は次のとおりです。

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/purple-green.css";
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

私はオンラインでいくつかの例に従って達成しましたが、それらは白い背景色と黒いテキストを持っています。私はここで何をしているのですか。私の質問は、スタイルを追加していないため、白黒にするか、styles.css Purple-green.css で構成したテーマを使用する必要があることです。どの CSS が使用されているかを知る方法と、それを停止または変更する方法を教えてください。

以下は私のhtmlです

<h2>Property List</h2>

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

  <!--<ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let property">
      {{property.id}}
    </mat-cell>
  </ng-container>-->
  <ng-container matColumnDef="erfSize">
    <mat-header-cell *matHeaderCellDef> ERF Size </mat-header-cell>
    <mat-cell *matCellDef="let property">
      <a [routerLink]="['/property-edit', property.id]">{{property.erfSize}}</a>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="area">
    <mat-header-cell *matHeaderCellDef> Area </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.area}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="buildingGLA">
    <mat-header-cell *matHeaderCellDef> Building GLA </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.buildingGLA}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="buildingGBA">
    <mat-header-cell *matHeaderCellDef> Building GBA </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.buildingGBA}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="parkingType">
    <mat-header-cell *matHeaderCellDef> Parking Type </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.parkingType}} </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>

</mat-table>

4

1 に答える 1