angular - Angular Material Datatable 補間内で三項式を使用して html を表示する方法

Question

プロジェクトに Angular Material Datatable のセットアップがあります。私のプロジェクトでは、いくつかのテーブルを使用してさまざまなデータソース (クライアント、プロバイダー、研修生、企業) を表示するため、コンポーネントで 1 つのデータテーブルを使用し、データ、列などを特定のサービスから動的に渡すことが目的です。

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> <span  style="text-transform: capitalize">{{ column }}</span> </th>
  <td mat-cell *matCellDef="let element">
    {{  element[column]   }} // I need to use an expression here
  </td>
</ng-container>

私のコラムはそうです

  displayedColumns: string[] = ['name', 'address1', 'city', 'postcode', 'region', 'options'];

したがって、この 1 つのブロックで完全なテーブル コンテンツが動的に構築されます。最後にオプションの列があることに気づきました。このフィールドはデータソースには存在しません。ボタン グループに対応するためのもので、それぞれの行の削除や編集などの機能を提供できます。

'mat-cell' 要素には既に *matCellDef 属性が設定されているため、構造ディレクティブを使用できません。そこで、補間ブレース内に単純な三項式を記述して、列に「オプション」列ヘッダーがあるかどうかを確認し、ボタンのデータを切り替えることができると考えました。

<ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> <span  style="text-transform: capitalize">{{ column }}</span> </th>
  <td mat-cell *matCellDef="let element">
    {{  column == 'options' ? '<button mat-raised-button color="accent">Edit</button>' : element[column]   }}
  </td>
</ng-container>

しかし、ボタンを書き込むためにテンプレートリテラルを開いた直後に、私のIDEは「閉じられていない文字列リテラル」について不平を言い、画面にレンダリングすると、エラーは発生しませんが、テーブルがかなり混乱します

それでも、三項から HTML 要素を返さない場合、エラーは発生せず、テーブルは期待どおりに動作します

{{  column == 'options' ? 'options column' : element[column]   }}

また、html をテンプレートに返す関数を 3 項式から呼び出してみましたが、エスケープされます。

三項条件を通過する行にボタンをレンダリングする方法について誰かアドバイスできますか?

"@angular/material": "^7.0.3",
"@angular/core": "~7.0.0",

ティア