Angular2 материальный дизайн, как заполнить карту динамически из dataSource?

Question

Я надеюсь, что кто-то здесь может мне помочь. у меня есть массив dataSource, и я хочу динамически записывать эти данные в несколько элементов mat-card. например, у меня есть массив размером 200. Теперь я хочу записать определенное количество данных, например, 30 данных, в матричную карту, а затем записать новую матричную карту со следующими 30 данными и так далее, пока все Данные из моего источника данных записываются в мат-карты. Я попробовал это с ngFor, но у меня очень мало знаний о программировании, поэтому я хотел спросить, есть ли у вас решение для меня? большое спасибо

Answer 1

Это можно сделать, разбив данные в исходном массиве на двумерный массив, где элемент 0 - это массив, содержащий первые 30 элементов, элемент 1 - массив, содержащий вторые 30 элементов и т. Д. c. Например, если ваш массив был:

['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 до l oop над массивом фрагментов и визуализировать каждый элемент в одной карте:

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

См. этот StackBlitz для рабочей демонстрации.