我想用卡片制作一个类似于电子商务的网站,我正在使用 Angular 和 MdBootstrap UI Kit。
假设我有 18 张牌,我想要 4 行 4 张牌,最后一行应该有 2 张牌。我的卡片数据来自 json 格式的后端。
但我得到了这个输出。
我想要的是这个。
我目前拥有的代码
html:-
<div class="container">
<div class="row" *ngFor='let row of grid'>
<div class="col" *ngFor='let c of row'>
<div style="margin: 10px">
<mdb-card>
<!--Card image-->
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg" alt="Card image cap"></mdb-card-img>
<!--Card content-->
<mdb-card-body>
<!--Title-->
<mdb-card-title>
<h4>{{c}}</h4>
</mdb-card-title>
<!--Text-->
<mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's
content.
</mdb-card-text>
<a href="#" mdbBtn color="primary" mdbWavesEffect>Button</a>
</mdb-card-body>
</mdb-card>
</div>
</div>
</div>
</div>
ts:-
export class HomeComponent implements OnInit {
cards: number;
grid: number[][];
constructor() {}
ngOnInit() {
this.cards = 18;
this.gridgenerator();
}
gridgenerator(): number[][] {
let last = this.cards % 4;
let rows =
this.cards % 4 === 0
? new Array(Math.floor(this.cards / 4))
: new Array(Math.floor(this.cards / 4 + 1));
this.grid = new Array(rows);
for (let r = 0; r < rows.length; r++) {
if (r === rows.length - 1) {
this.grid[r] = new Array(last);
} else {
this.grid[r] = new Array(4);
}
}
console.log(this.grid);
return this.grid;
}
}