Angular8で動的にtableのセルに背景色を指定する方法がわからない

Question

前提・実現したいこと

Angular8を使って、動的なデータに紐づくテーブルを作ろうとしています。
動的なデータは「no、name、カラコード（#000000～で範囲は決まっていない）」です。
上記データを使ってテーブルを表示する際、各行の３つ目のセルだけ、
そのカラコードに合わせて背景色を変えたいと思っています。

例）取得したデータが「1, test, #000000」なら、
「1, test, （背景色が#000000）#000000」となるようにしたい。

発生している問題・エラーメッセージ

styleバインディングやpropertyバインディングなど調べているのですが、
なかなか動的にセルの属性だけを指定することができていません。

該当のソースコード

---

- HTML

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"> <!-- no Column --> <ng-container matColumnDef="no"> <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th> <td mat-cell *matCellDef="let element"> {{element.no}} </td> </ng-container> <!-- Name Column --> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <!-- course Column --> <ng-container matColumnDef="course"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Course </th> <!-- <td mat-cell *matCellDef="let element" bgcolor="6699cc"> {{element.course}} </td> --> <!-- <td id="tdname" name="tdname" [(ngModel)]="name" mat-cell *matCellDef="let element" bgcolor="6699cc"> {{element.course}} </td> --> <td mat-cell *matCellDef="let element" [attr.bgcolor]="bgcolor"> {{element.course}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> </table>

---

- typescript
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';

export interface Reservation {
no: number;
name: string;
course: string;
}

const SAMPLE_DATA: Reservation[] = [
{no: 0, name: "AA", course: "#000000"},
{no: 1, name: "BB", course: "#111111"},
{no: 2, name: "CC", course: "#22AABB"},
];

@Component({
selector: 'aa-root',
templateUrl: './page-c.component.html',
styleUrls: ['page-c.component.css']
})

export class PageCComponent {

displayedColumns: string[] = ['no', 'name', 'course'];
dataSource;
bgcolor;

@ViewChild(MatSort, {static: true}) sort: MatSort;

ngOnInit() {
this.bgcolor = "22AABB";
this.dataSource = new MatTableDataSource(SAMPLE_DATA);
}
}

---

- css
table {
width: 100%;
}

th.mat-sort-header-sorted {
color: black;
}

---

試したこと

angular-materialのmat-tableでdata-sourceのデータを指定して、
attr.bgcolorで色を変更すると、その列全体の色が変わる所まではできています。
ただ、各行のセルごとに色を変更するのができずの状態です。

補足情報（FW/ツールのバージョンなど）

Angular CLI: 8.0.6
Node: 14.15.4
OS: win32 x64
Angular: 8.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.800.6
@angular-devkit/build-angular 0.800.6
@angular-devkit/build-optimizer 0.800.6
@angular-devkit/build-webpack 0.800.6
@angular-devkit/core 8.0.6
@angular-devkit/schematics 8.0.6
@angular/cdk 8.2.3
@angular/cli 8.0.6
@angular/material 8.2.3
@ngtools/webpack 8.0.6
@schematics/angular 8.0.6
@schematics/update 0.800.6
rxjs 6.4.0
typescript 3.4.5
webpack 4.30.0

Answer 1

ズレているかもしれませんが、

<td mat-cell *matCellDef="let element" [style.background-color]="element.course"> {{element.course}} </td>

ではいけませんか？