angular2材料设计如何从数据源动态填充垫卡

Question

我希望这里有人能帮助我。我有一个dataSource数组，我想将这些数据动态写入几个mat-card元素中。例如，我有一个大小为200的数组。现在我想写一定数量的数据，例如30个数据到一个垫子卡，然后写一个新的垫子卡和接下来的30个数据，以此类推，直到我的dataSource中的所有数据都被写入垫子卡。我在ngFor上试过这个，但我对编程知之甚少，所以我想问你是否有适合我的解决方案？非常感谢

Answer 1

您可以通过将原始数组中的数据分块到二维数组中来实现这一点，其中项目0是包含前30个项目的数组，项目1是包含后30个项目等的数组。例如，如果您的数组是：

['this', 'is', 'some', 'data', 'that', 'will', 'be', 'rendered', 'in', 'the', 'cards']

分块数组(假设分块大小为3(将为：

[['this', 'is', 'some'], ['data', 'that', 'will'], ['be', 'rendered', 'in'], ['the', 'cards']]

我已经实现了以下函数来对数据进行块化(只需将3更改为您想要的任何块大小(：

readonly chunkSize: number = 3;
getChunkedData() {
var chunkedData = [];
for (let i = 0; i < this.data.length; i += this.chunkSize) {
chunkedData.push(this.data.slice(i, i + this.chunkSize));
}
return chunkedData;
}

然后，您可以使用ngFor在分块数组上循环，并在单个卡片中呈现每个项目：

<mat-card *ngFor="let data of getChunkedData()">
<p *ngFor="let item of data">
{{item}}
</p>
</mat-card>

请参阅这个StackBlitz的工作演示。