我想实现一个设计,其中我有一个动态的数据数组,我想在每行只有3个引导列中呈现它们,如下所示:
<div class="row">
<div class="col-md-4">
<a>data</a>
<a>data</a>
<a>data</a>
</div
<div class="col-md-4">
<a>data</a>
<a>data</a>
<a>data</a>
</div
<div class="col-md-4">
<a>data</a>
<a>data</a>
<a>data</a>
</div
</div>
输出应如下所示:
但是当我把*ngFor
放在列div上时:
<div class="row">
<div class="col-md-4" *ngFor="let d of data">
<a>{{d.name}}</a>
</div>
</div
它不会给第一个静态方法提供相同的结果,任何帮助重现动态数据循环以得到相同的结果?
你可以这样做:
columns: string[][] = [];
ngOnInit() {
const itemsInColumn = Math.floor(this.data.length()/3);
columns[0] = data.slice(0, itemsInColumn);
columns[1] = data.slice(itemsInColumn, itemsInColumn * 2);
columns[2] = data.slice(itemsInColumn * 2);
}
在模板中:
<div class="row">
<div class="col-md-4" *ngFor="let c of columns">
<a *ngFor="let d of c">{{d}}</a>
</div>
</div>