将HTML传递到材质对话框-Angular Material

Question

我正在尝试将HTML传递给对话框，但对话框中显示[object HTMLTableElement]而不是表格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>