css - Angular 6 : Update NG Style with function

Question

我今天来这里是因为我想知道关于 Angular 的 NG 样式(我的版本是 6)。当我使用函数返回一个值时，我如何更新[ngStyle]。

一如既往，这是我的问题的一个简化示例:

我从对象数组生成 div。对于每个部分，有两个 div:一个在左侧，一个在右侧。

左侧 div 的大小会根据内容而变化，因此它既可以是 50px 也可以是 125px。

我希望右边的 div 适合他左边那个的大小，总是那个大小的一半(getLeftDivHeight 中的 2)。显然，这将在每个部分(容器)中完成。

当 div 的左侧高度发生变化时，如何使 ngStyle 更新(由于调整大小、添加内容或页面显示时间)？ )

代码如下:

HTML

<section class = "Container" *ngFor="let oneContent of allContent">

<div id = "{{oneContent.id}}" style="float: left">
<p> {{oneContent.Content}} </ p>
</div>

<div style="float: right" [ngStyle]="height: getLeftDivHeight(oneContent.id, 2)">
</div>

</div>

Typescript(仅相关函数)

getLeftDivHeight(id: string, divisionNumber: number): string {
height = document.GetElementById(id).getBoundingClientRect().height / 
divisionNumber;
return height + 'px';
}

请注意，我不是在寻找 HTML 解决方案，而是 Angular 解决方案，上面的代码只是解释我的问题的示例。

提前致谢

Answer 1

您可以从 getLeftDivHeight 方法返回整个样式字符串，例如 height: 100px


getLeftDivHeight(id: string, divisionNumber: number): 字符串{
height = document.GetElementById(id).getBoundingClientRect().height/divisionNumber;
返回`高度:${height}px`；
}


或者您可以在模板中使用以下语法
[style.height.px]="getLeftDivHeight(参数)"
该方法仅返回数字高度值。