Javascript 为什么这个div在typescript文件中创建时是空的？

Typescript

tab1: {
    headings: ['Col 1', 'Col 2', 'Col 3', 'Col 4'],
    content: [
        {
            col1: 'name of row object',
            col2: `<div style="width: 550px; height: 40px; border: 1px solid black"></div>`,
            col3: 'col3'
        }
    ]
},

tab1：{
标题：[“第1列”、“第2列”、“第3列”、“第4列”]，
内容：[
{
col1:'行对象的名称'，
col2:``，
col3:‘col3’
}
]
},

HTML（为了便于阅读，我删除了css类）

{{heading}}

这是DOM的屏幕截图。它显示传入的版本为空，而硬编码版本具有所需的html。

这是一个屏幕截图输出表。正如在dom中一样，传入的html不能正确显示，但直接写入第二个td的html显示正确

---

谢谢你的帮助

使用Günter Zöchbauer关于使用sanatizer的建议，我从@angular/platform browser研究并实现了DomSanatizer

    import {DomSanitizer} from '@angular/platform-browser';

    export class ResourcesComponent {
      constructor(private sanitizer: DomSanitizer){}

      tab1: {
          headings: ['Col 1', 'Col 2', 'Col 3'],
          content: [
              {
                  col1: 'name of row object',
                  col2: this.transform(`<div style="width: 550px; height: 40px; border: 1px solid black"></div>`),
                  col3: 'col3'
              }
          ]
      },

      transform(html) {
          return this.sanitizer.bypassSecurityTrustHtml(html);
      }
    }

从'@angular/platform browser'导入{domsanizer}；
导出类资源组件{
构造函数（私有sanitizer:DomSanitizer）{}
表1：{
标题：[“第1列”、“第2列”、“第3列”]，
内容：[
{
col1:'行对象的名称'，
col2:this.transform（``），
col3:‘col3’
}
]
},
转换（html）{
返回此.sanitizer.bypassSecurityTrustHtml（html）；
}
}

在同一个类中，我添加了一个转换函数来清理html

最后，我传入了我的html，它按预期工作。html中不需要任何更改

---

我在一个大的html页面上尝试了这一点，该页面将在函数中返回，它工作得非常好。谢谢你最初的建议，甘特·佐克鲍尔

您需要如或所示的消毒剂

    import {DomSanitizer} from '@angular/platform-browser';

    export class ResourcesComponent {
      constructor(private sanitizer: DomSanitizer){}

      tab1: {
          headings: ['Col 1', 'Col 2', 'Col 3'],
          content: [
              {
                  col1: 'name of row object',
                  col2: this.transform(`<div style="width: 550px; height: 40px; border: 1px solid black"></div>`),
                  col3: 'col3'
              }
          ]
      },

      transform(html) {
          return this.sanitizer.bypassSecurityTrustHtml(html);
      }
    }