Question

打字稿

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'
        }
    ]
},

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

<table>
    <thead>
        <tr>
            <th *ngFor="let heading of visibleData.headings">
                <span>{{heading}}</span>
            </th>
        </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let row of visibleData.content" >
        <tr>
            <td *ngFor="let column of row"><div [innerHtml]="column"></div></td>
            <td><div style="width: 550px; height: 40px; border: 1px solid red"></div></td>
        </tr>
    </ng-container>
    </tbody>
</table>

这是DOM的截图。它显示传入的版本为空，而硬编码版本需要html。

这是截屏输出表。由于它在dom中，传入的html无法正确显示，但直接写入第二个td的html正确显示。

感谢您的帮助！

Answer 1

使用GünterZö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);
      }
    }

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

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

我在一个很大的html上尝试了这个，它正在函数中返回，它运行得很好。感谢最初的建议GünterZöchbauer！

为什么在typescript文件中创建此div为空？

1 个答案: