动态创建的组件样式不起作用。ng-reflect-ng-style= "[object Object]"

Question

我正在我的主组件.ts文件中动态创建一个组件，如下所示：

const colorPickerDropdownFactory = this._resolver.resolveComponentFactory(
ColorPickerComponent
);
this.colorPickerDropdown = this.colorPickerContainer.createComponent(
colorPickerDropdownFactory
);
this.colorPickerDropdown.instance.left = e.clientX;
this.colorPickerDropdown.instance.top = e.clientY;

它是有效的，我的组件是动态创建的，但由于某种原因，当我向它发送样式(上面代码块的最后两行(时，样式不起作用。

我在动态加载的组件.ts(ColorPickerComponent(中添加了以下内容：

left: number;
top: number;

和.html:

<div class="colorPicker" [ngStyle]="{'left': left}"></div>

当检查控制台时，我在colorPicker分区中看到ng-reflect-ng-style="[object Object]"。我想知道这是否意味着它试图设置样式，但没有值。

这很奇怪，因为当把一个值放入[ngStyle](如：[ngStyle]="{'left': '100px'}"(时，它会起作用。

当console.logleft和top时，我得到了我想要的值。

我需要做些什么才能启用可变样式？

Answer 1

使用clientX时，该值只是一个数字，并且缺少px等单位。

相反，你应该做

this.colorPickerDropdown.instance.left = e.clientX + 'px';
this.colorPickerDropdown.instance.top = e.clientY + 'px';

并将类型更改为string