从样式标记调用函数时的 ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个动态创建的 flexbox (ngFor)，其中包含不同大小的项目。 我希望每个项目都有一个网格背景，这取决于它们有多大。 我正在计算打字稿函数中的 css 属性。 不幸的是，该值在开始时更改了两次，因此永远不会渲染网格背景。

HTML：

<div *ngFor="let config of data.componentTile; let i=index" class="flexItem" style="width: calc(100% / {{data.componentTile.length}})">
    <div id="{{i}}" class="class" [style.height]="calcHeight(i,config.h,config.w)" [style.width]="calcWidth(i,config.h,config.w)" [style]="calcBackgroundGrid(i,config.h,config.w)" >
  <div *ngIf="{ showInputFields: false} as variable">

TS：

public calcBackgroundGrid(id: number, h: number, w: number): string {
const element: HTMLElement = document.getElementById(String(id));
let widthGrid;
let heigthGrid;
if (element !== null) {
  heigthGrid = element.clientHeight / h;
  widthGrid = element.clientWidth / w;
}
if (!widthGrid && !heigthGrid) {
  return '';
} else {
 // console.log(String(widthGrid + ' ' + heigthGrid));
  return String('background-size: ' + widthGrid + 'px ' + heigthGrid + ' px; ' + 'background-image: linear-gradient(to right, grey 1px, transparent 1px),linear-gradient(to bottom, grey 1px, transparent 1px);');
}}

它的样子：

它应该是什么样子：