Блог

Я прикрепил изображение, чтобы проиллюстрировать проблему. У меня есть 4 элемента на странице:

• таблица (представляющая собой заголовок с некоторыми данными)
• диаграмма
• таблица под диаграммой (в которой в качестве заголовка таблицы используются метки диаграммы)
• нижний колонтитул

Поскольку первые table имеют только 2 строки (и статичны), tableChart также статичны (всего 5 строк) и footer имеют только одну строку, я хочу динамически вычислить высоту диаграммы.

Итак, я получаю window.height (или контейнер) и уменьшаю table высоту, tableChart высоту и footer высоту. Затем назначьте значение chart элементу. Я делаю это в AfterViewInit рамках жизненного цикла (я тоже пытался DoCheck ), но не могу решить проблему: поскольку элемент #chart отрисовывается одновременно с остальными, когда я получаю #chartTable setChartHeight() метод height inside, он получает только часть общей высоты, необходимой для отрисовки всех 5 строк, поэтому диаграмма будет иметь большую высоту, чем необходимо.

Чтобы быть более конкретным:

• chartTable имейте нормальную высоту 100 пикселей;
• поскольку setChartHeight() вызывается слишком рано, chartTable обнаруживается, что он имеет только 20 пикселей (я думаю, что может отображать только первую строку).
• таким образом, от общего количества 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 элементом, он будет отрисован первым. Итак, мне нужно отобразить таблицу диаграмм only when I'm sure that , которая уже отображается на странице.

изменить: пример codesandbox

Спасибо

Наконец, как сказали Стрелла и Лиам, я нашел решение, используя 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;

  amp;__chart {
    flex: 1 1 auto;
  }

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