Показать массив в таблице с динамическим c количеством столбцов

Question

Скажем, я получил массив с сервера.

  var arr = [
            { ID: "001", Name: "a00",  isChecked: "true" },
            { ID: "002", Name: "b00",  isChecked: "true" }, 
            { ID: "003", Name: "c00",  isChecked: "true" },
            { ID: "004", Name: "d00",  isChecked: "true" },
            { ID: "005", Name: "e00",  isChecked: "true" },
            { ID: "006", Name: "f00",  isChecked: "true" }, 
            { ID: "007", Name: "g00",  isChecked: "true" },
            { ID: "008", Name: "h00",  isChecked: "true" }, 
            { ID: "009", Name: "i00",  isChecked: "true" },
            { ID: "010", Name: "j00",  isChecked: "true" }, 
            { ID: "011", Name: "k00",  isChecked: "true" },
            { ID: "012", Name: "l00",  isChecked: "true" },
            { ID: "013", Name: "m00",  isChecked: "true" },
            { ID: "014", Name: "n00",  isChecked: "true" }, 
            { ID: "015", Name: "o00",  isChecked: "true" },
            { ID: "016", Name: "p00",  isChecked: "true" }, 
             // ....many many rows

        ]

Теперь я хочу отобразить его в таблице с определенным количеством столбцов. Например, если я хочу отобразить его в 4 столбцах. Затем я использую

 <tbody>
    <tr *ngFor="let group of arr">
      <td>{{group.name}}</td>
      <td>{{group.name}}</td>
      <td>{{group.name}}</td>
      <td>{{group.name}}</td>
   </tr>

Ожидаемый результат любит

a00 | b00 | c00 | d00
e00 | f00 | g00 | h00
.....

Если я выбрал 7 столбцов. Тогда код:

<tbody>
    <tr *ngFor="let group of arr">
        <td>{{group.name}}</td>
        <td>{{group.name}}</td>
        <td>{{group.name}}</td>
        <td>{{group.name}}</td>
        <td>{{group.name}}</td>
        <td>{{group.name}}</td>
        <td>{{group.name}}</td>
</tr>

Ожидаемый результат любит:

a00 | b00 | c00 | d00 | e00 | f00 | g00
.... 

Однако я не знаю, 4 или 7, размер куска задается переменной size. Так как это сделать?

Answer 1

Вы можете сделать это, используя:

1. Преобразование массива в двумерный массив в зависимости от переменной размера.
2. Теперь переберите этот массив в шаблоне.

.ts

newArr = []
size = 2;    // change this as per your requirement

ngOnInit() {
  while (this.arr.length) { 
    this.newArr.push(this.arr.splice(0, this.size)); // create 2D array
  }
}

. html

<table>
    <tbody>
        <tr *ngFor="let outer of newArr">
            <td *ngFor="let group of outer">{{group.Name}}</td>
        </tr>
    </tbody>
</table>

Рабочий стекблиц

Answer 2

На основе переменной size вы можете создать массив с длиной размера и использовать другой *ngFor с этим массивом для визуализации столбцов.

Пример

Компонент

class MyComponent extend OnInit {
   size = 4;
   sizeArray = [];

   ngOnInit() {
     this.sizeArray = new Array(this.size)
   }
}

Шаблон

<tbody>
  <tr *ngFor="let group of arr">
    <td *ngFor="let index of sizeArray">
      {{group.name}}
    </td>
  </tr>
</tbody>