时间戳

首页 > 解决方案 > 动态计算元素的宽度？

angular - 动态计算元素的宽度？

问题描述

我有要显示的元素数组，并且我想根据元素的数量动态计算每个元素的宽度。

有什么建议吗？

  <span class="years" [style.width.%]="65%/data.length"
        *ngFor="let year of data">{{year.displayName |translate}}</span>

标签： angular

解决方案

一个简单的选择可能是将函数内联到模板中并使用它来计算宽度

组件.html

 <span class="years" [style.width]="calculateWidth(data.length)"
        *ngFor="let year of data">{{year.displayName |translate}}</span>

组件.ts

calculateWidth(length){
  return 65/length+'%'
}

或者，为了避免在每次渲染时计算模板，最好只计算数据何时进入。例如，保留一个名为spanWidth或类似的变量，并为接收到的数据分配一个值（如果使用setter或ngOnChanges从父级传递)

推荐阅读