时间戳

首页 > 解决方案 > 如何根据屏幕上剩余的可用空间向数组添加更多项目

angular - 如何根据屏幕上剩余的可用空间向数组添加更多项目

问题描述

我有一个div应该包含一些盒子的盒子。的宽度div取决于屏幕尺寸。另一方面，我想在容器中添加足够的盒子div，这样div就没有可观的可用空间。下图，是想要的输出。有 7 个盒子，没有空间再放另一个盒子： 在此处输入图像描述

实现上图的代码是这样的：

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

我需要知道容器的宽度，div并据此计算我应该添加多少个盒子！
我怎样才能做到这一点？

到目前为止，我已经尝试使用@ViewChildand的组合ElementRef来实现我想要的，并且成功了。
我曾经@ViewChild获取div并计算我需要多少个盒子的宽度。
问题是，该解决方案被认为是访问DOM文件ts，我应该避免这种情况。还有其他解决方案吗？有什么方法可以检测是否还有剩余空间并调用一种方法，该方法将更多项目添加到数组（days数组）中，从而导致在视图上呈现更多框？

标签： angular

解决方案

这个问题在 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看起来更好。

依赖于调整大小事件的解决方案可能会导致巨大的开销！

推荐阅读