HTML更新Angular中的DIV内容

Question

在我的HTML应用程序中，我的HTML页面中有一个DIV，

<div id="graph" *ngIf="newRequired == 0"></div>

我想在容器中加载图形，我的容器代码是这样的

Element createContainer() {
    var e = new DivElement()
        ..style.height = '300px'
        ..style.maxWidth = '70%'
        ..style.marginBottom = '50px';
    document.body.append(e);
    return e;
}

这项工作正常...由于元素是动态元素，因此我面临的问题..因此图形会加载到页面底部。

相反，我想在DIV id =“ graph”（已在HTML页面内部）中加载图形。

我觉得要做到这一点，我们必须在这里更改代码document.body.append（e）...谁能帮助我，因为DIV id =“ graph”

Answer 1

如果要在div中添加代码，请用document.getElementById('graph').innerHTML = e替换document.body.append(e) 。

另外，由于您似乎正在使用jQuery，因此可以尝试$('#graph').append(e) 。

Answer 2

DOM操作-特别是注入与Angular试图通过其框架实现的目标完全不一致。 在过去的几年中，我与Angular一起工作，没有一个需要做类似事情的场合： document.body.append(e); 。

相反，您应该在html中使用属性绑定。

所以...

Element createContainer() {
    var e = new DivElement()
        ..style.height = '300px'
        ..style.maxWidth = '70%'
        ..style.marginBottom = '50px';
    document.body.append(e);
    return e;
}

将转换为：

在组件中：

export class ExampleComponent implements OnInit {
    public height: number;
    public maxWidth: number;
    public marginBottom: number;
    ...
}

在html中：

<div id="graph" *ngIf="newRequired == 0">
    <div [ngStyle]="{'height': height, 'max-width': maxWidth, 'margin-bottom': marginBottom}"></div>
</div>

使用这种方法，如果您出于任何原因需要更改高度，只需要做的就是更改组件中的属性，然后html就会更新。 如果您采用document.body.append(e)原始方法，则必须手动更新这些值。