Display [object HTMLTableElement]

Question

我尝试显示在删除元素时创建的表，但显示为：[object HTMLTableElement]，这是我的示例

html文件：

<div class="row">
<div class="column left">
    <div id="div1" cdkDrag cdkDropList cdkDropListConnectedTo="drop-list" *ngFor="let type of types"
        [cdkDragData]="type" (cdkDragMoved)="moved($event)">
        {{type.text}}
        <div *cdkDragPlaceholder class="field-placeholder"></div>

    </div>
</div>
<div class="column right">
    <h2 style="text-align: center">Box2</h2>
    <div #dropZone class="dropZone" cdkDropList id="drop-list" 
(cdkDropListDropped)="addTable($event)"
(cdkDropListDropped)="itemDropped($event)"
        >
        <div *ngFor="let field of fields;" cdkDrag
      style="position:absolute;z-index:10" [style.top]="field.top" [style.left]="field.left">
                {{field.path}}

        </div>
    </div>

</div>

链接（https://stackblitz.com/edit/angular-527tdy?file=src%2Fapp%2Fexample%2Fexample.component.html）

Answer 1

[第一件事是，当您应该使用{{field.path}}时，您正在使用{{field.path.innerHTML}}。您的innerHTML具有您要查找的HTML代码。

第二，您可以像使用innerHTML一样使用属性[innerHTML]="field.path.innerHTML"，它应该呈现HTML代码。

<div *ngFor="let field of fields;" cdkDrag style="position:absolute;z-index:10" 
   [style.top]="field.top" [style.left]="field.left" 
   [innerHTML]="field.path.innerHTML">
</div>