Как динамически заполнять данные в столбцах и строках таблицы - PullRequest
Новая
       6

Как динамически заполнять данные в столбцах и строках таблицы

0 голосов
/ 19 декабря 2018

Я получаю массив строк из API и должен показать их в таблице (word1, word2, word3 и т. Д.).Я не знаю точно, сколько это будет.Количество столбцов в таблице должно быть 5, а количество строк зависит от этого массива.

                    <tr>
                        <th><a href="#">Cell 1</a></th>
                        <th><a href="#">Cell 2</a></th>
                        <th><a href="#">Cell 3</a></th>
                        <th><a href="#">Cell 4</a></th>
                        <th><a href="#">Cell 5</a></th>
                    </tr>
                    <tr>
                        <th><a href="#">Cell 6</a></th>
                        <th><a href="#">Cell 7</a></th>
                        <th><a href="#">Cell 8</a></th>
                        <th><a href="#">Cell 9</a></th>
                        <th><a href="#">Cell 9</a></th>
                    </tr>

Если там 20 пунктов - должно быть 4 строки.Я понятия не имею, как начать новый ряд.Примеры с заполнением строками, как показано ниже, показывают, как заполнить строками 

  <tr *ngFor="let tablerows of data">
                      <td>
                      {{tablerows.row_id}}
                      </td>
                      <td>{{tablerows.number}}</td>
                      <td >{{tablerows.employee_name}}</td>
                      <td >{{tablerows.manager_name}}
                      </td>
                    </tr>

Возможно ли сделать это по углу?Или, может быть, я должен создать несколько массивов в компоненте?

1 Ответ

0 голосов
/ 19 декабря 2018

Это, вероятно, довольно плохо, но так как плохо иметь массив строк для манипулирования таким образом вместо массива объектов по мере необходимости, то здесь:

в компоненте, разбить ваш массив наподмассивы длиной 5 и поместите их в новый массив, например так: 

ngOnInit(){
  for (var i = 1; i <= 25; i++) {
    this.foo.push(i);
 }

 for(let x=0; x<this.foo.length; i+5){
  this.bar.push(this.foo.splice(x,x+5));
 }

}

Я использовал числовой массив, чтобы показать.В html теперь вы можете игнорировать foo и работать только на bar, например: 

  <table style="border:1px solid">          
      <tr *ngFor="let qwe of bar" style="border:1px solid">
        <td *ngFor="let asd of qwe" style="border:1px solid"> {{asd}}</td>
      </tr>
  </table>

Я понимаю, что это не совсем ваш случай, но я думаю, что вы можете выработать свою логику отсюда (возможно,я думаю, вы не можете переключаться с s, поскольку у вас есть определенные ключи для доступа, но все же :))

...