angular - 将 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>
   

但它不打印 Table 而是打印[object HTMLTableElement].

截图如下：

请问有什么线索吗？

Answer 1

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

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