Как добавить больше элементов в массив на основе количества свободного места на экране

Question

У меня есть div, который должен содержать несколько ящиков. Ширина div зависит от размера экрана. С другой стороны, я хочу добавить достаточно коробок в контейнер div, чтобы div не располагало значительным свободным пространством. Картинка ниже, это желаемый результат. Есть 7 блоков, и больше нет места для другого блока:

Код для реализации приведенного выше рисунка выглядит следующим образом:

<div class="date-box" *ngFor="let day of days; ">
    <div>{{day}}</div>
</div>

I нужно знать ширину контейнера div и исходя из этого подсчитать, сколько ящиков нужно добавить!
Как я могу это сделать?

Пока я пробовал использовать комбинацию @ViewChild и ElementRef для достижения того, что я хочу, и это сработало.
Я использовал @ViewChild, чтобы получить ширину div и вычислить, сколько ящиков мне нужно.
Проблема в том, что решение рассматривается как доступ к DOM в ts файлах, которых я должен избегать. Есть ли другое решение? Есть ли способ определить, осталось ли свободное место, и вызвать метод, который добавляет больше элементов в массив (массив days), что приводит к отображению большего числа блоков в представлении?

Answer 1

Эта проблема может быть решена намного проще в CSS. Просто добавьте ВСЕ коробки и используйте flex-wrap: wrap в сочетании с overflow: hidden, чтобы обернуть любые невидимые предметы:

<div class="button-bar">
  <div class="button-bar-item" *ngFor="let day of days">
    <div class="date-box">
      <div>{{day}}</day>
    </div>
  </div>
</div>

.button-bar {
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-wrap: flex;
  justify-content: space-around;
}

.button-bar-button {
  height: 100%;
}

Поскольку высота button-bar-item равна 100%, когда полоса заполнена, следующие кнопки будут скрыты из виду, поскольку переполнение button-bar скрыто. Если вам не нравится макет, есть другие значения для justify-content, такие как space-between, которые могут выглядеть лучше.

Решения, которые зависят от событий изменения размера, могут вызвать драматические издержки c!

Answer 2

Мне пришлось заняться этим вопросом несколько недель go, и вот что я придумал.

<div class="date-box-container" #container>
    <div class="date-box" *ngFor="let day of days" #dayElement>
        <div>{{day}}</div>
    </div>
</div>

Вы можете получить #container div и #dayElement div в вашем классе компонентов соответственно с @ViewChild() и @ViewChildren().

Я решил использовать зависимость resize-наблюдающий-polyfill для наблюдения за каждым изменением размера в вашем container div. Просто добавьте этот бит кода в метод ngAfterViewInit(), чтобы быть уверенным, что ваш DOM уже загружен.

(не забудьте добавить overflow: hidden; в ваш контейнерный div, чтобы сделать предстоящие вычисления)

const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
        // Here you must call you computation method that I'll describe later
    }
});

ro.observe(this.container);

Тогда вам нужно только довольно простое вычисление, используя родительский div offsetWidth и сумму их дочерних ширин, чтобы скрыть элементы, которые должны быть скрыты, сохраняя логическое свойство в day объект и *ngIf="day.visible" в вашем шаблоне.

Я надеюсь, что мое объяснение было достаточно ясным, если вы застряли, не стесняйтесь поделиться рабочей демонстрацией, показывающей ваши проблемы!