等待渲染另一个元素答案

【问题标题】：Waiting to render another elements等待渲染另一个元素
【发布时间】：2021-11-28 04:24:20
【问题描述】：

我附上了一张图片来说明这个问题。我在页面中有 4 个元素：

一个表（这是一个带有一些数据的标题）
图表
图表下方的表格（使用图表标签作为表格标题）
页脚

因为第一个 table 只有 2 行（并且是静态的），tableChart 也是静态的（只有 5 行）并且 footer 只有一行，我想动态计算图表的高度.

所以，我得到window.height（或容器）并减少table 高度、tableChart 高度和footer 高度。然后，将值分配给chart 元素。我在AfterViewInit 生命周期内执行此操作（我也尝试过DoCheck），但无法解决问题：因为#chart 元素与其他元素同时渲染，当我在#chartTable 方法中获得#chartTable 高度时，它只获得渲染所有 5 行所需的总高度的一部分，因此图表的高度将大于所需的高度。

更具体一点：

chartTable 的正常高度为 100px；
因为setChartHeight()被调用太早，发现chartTable只有20px（我认为只能渲染第一行）
因此，总共 500 像素（示例）将仅减少 20 像素，而不是 100 像素，chart 高度将是 480 像素（而不是 400 像素）

我怎么能等待将所有元素渲染到图表之外，并在最后，以正确的模式计算它的高度。

ngAfterViewInit(): void {
   this.setChartHeight();
}

setChartHeight(): void {
  let container = document.getElementById('container');
  if (typeof container == 'undefined' || container == null) {
    return;
  }

  let table = document.getElementById('table');
  let chartTable = document.getElementById('chartTable');
  let footer = document.getElementById('footer');

  const height = container.clientHeight - table.clientHeight - chartTable.clientHeight - 
  footer.clientHeight;

  let chart = document.getElementById('chart');
  chart.style.height = height + 'px';
}

我认为存在的另一个问题是chart 和chartTable 具有相同的数据源。所以，当源来的时候，因为chart元素在chartTable元素之上，所以会先渲染。所以，我需要渲染chartonly when I'm sure thatchartTable`已经显示在页面上。

编辑：codesandbox example

谢谢

【问题讨论】：

你能在codesanbox里做吗
如果您的布局中断使用 CSS。
是的，你应该使用 CSS 而不是 JS 来解决这个问题
我添加了一个代码框示例。作为一个实时仪表板，我需要它适合屏幕大小，因此无法显示任何溢出栏。

标签： javascript html angular typescript

【解决方案1】：

最后，正如 Strella 和 Liam 所说，我找到了使用 css 并避免重复使用 flex-layout 库的解决方案。

.container {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.table {
  flex: 0 1 auto;
}

.chart-container {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;

  &__chart {
    flex: 1 1 auto;
  }

  &__table {
    flex: 0 1 100px;
  }
}

【讨论】：