在Angular 8中,要实现每列基础分母100%的总百分比分布,可以通过以下步骤来实现:
以下是一个示例代码:
在组件的.ts文件中:
export class YourComponent {
columns = [
{ value: 50 },
{ value: 30 },
{ value: 20 }
];
}
在组件的.html文件中:
<div class="container">
<div *ngFor="let column of columns" class="column" [style.width]="column.value + '%'">
{{ column.value }}%
</div>
</div>
在组件的.css文件中:
.container {
display: flex;
}
.column {
flex: 1;
border: 1px solid black;
text-align: center;
}
在上面的示例中,我们使用了一个包含三个列的数组,并为每个列设置了一个值。在模板中,我们使用ngFor指令遍历列数据数组,并为每个列创建一个div元素。通过设置每个列的宽度为列值的百分比,我们实现了每列基础分母100%的总百分比分布。
请注意,这只是一个示例,你可以根据你的实际需求进行调整和修改。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
腾讯云云服务器(CVM)是一种可扩展的计算服务,提供了高性能、可靠稳定的云服务器实例,适用于各种场景的应用部署。
腾讯云对象存储(COS)是一种安全、稳定、低成本的云端存储服务,适用于存储和处理各种类型的数据,包括图片、视频、音频、文档等。
更多关于腾讯云云服务器(CVM)的信息,请访问:腾讯云云服务器(CVM)产品介绍
更多关于腾讯云对象存储(COS)的信息,请访问:腾讯云对象存储(COS)产品介绍
领取专属 10元无门槛券
手把手带您无忧上云