将 HTML 传递给 mat 对话框 - Angular Material

Question

我正在尝试将 HTML 传递给 mat 对话框，但它在对话框中显示 [object HTMLTableElement] 而不是 Table HTML。

我尝试过的步骤：

1. 在模板中创建一个元素引用如下：

   <table hidden #contentTable><th></th><tr></tr></table>
   

2. 在组件中访问 ViewChild 为

   @ViewChild('contentTable', { read: ElementRef }) contentTable: ElementRef<any>;
   

3. 在 DialogComponent 中将此作为数据传递为

   const tableData = this.contentTable.nativeElement;
   const dialogRef = this.dialog.open(GeneralDialogComponent, {
       panelClass: 'customDialog',
        data: {
           title: `${data.count}`,
           content: tableData
        }
   });
   

4. 在DialogComponent中，访问的数据内容如下：

   // method in component
   getHtml(html) {
      return this.domSanitizer.bypassSecurityTrustHtml(html);
   }
   

5. 然后在 HTML 中这样访问：

   <div [innerHTML]="getHtml(data?.content)"></div>
   

但它不打印表格而是打印[object HTMLTableElement]。

截图如下：

请问有什么线索吗？

Answer 1

你应该传递 elementRef 的 innerHtml 而不是它本身：

<div [innerHTML]="getHtml(data?.content.innerHTML)"></div>