Как отобразить таблицу с 3 столбцами в шаблоне HTML, используя массив строк с Angular? - PullRequest
Новая
       23

Как отобразить таблицу с 3 столбцами в шаблоне HTML, используя массив строк с Angular?

2 голосов
/ 12 июня 2019

Я получаю данные в виде массива [ 'one', 'two', 'three', 'four', 'five', 'six'] Я хочу отобразить их в табличном формате следующим образом: 

    <table>
    <caption> Numbers:</caption>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>four</td>
        <td>five</td>
        <td>six</td>
    </tr>
    </table>

Может ли вышеуказанный шаблон динамически генерироваться с использованием ngFor & ngIf?

Итак, при каждом (index% 3) = 0 мы будем рисовать новую строку, но как нам это сделать в HTML с угловыми директивами?

Хитрость в том, что входящий массив может иметь любое произвольное количество строк.

Ответы [ 2 ]

6 голосов
/ 12 июня 2019 
<table>
    <caption> Numbers:</caption>
    <ng-container *ngFor="let item of items; let i=index;">
        <tr *ngIf="i % 3 == 0">
            <ng-container *ngFor="let pos of [1, 2, 3]">
                <td *ngIf="i+pos < items.length">{{items[i+pos]}}</td>
            </ng-container>
        </tr>
    </ng-container>
</table>

Я не проверял это, но он должен это сделать.

2 голосов
/ 12 июня 2019

Попробуйте это (файл TS): 

  data = ['one', 'two', 'three', 'four', 'five', 'six'];
  results: any[] = [];

  constructor() {
    this.results = this.groupColumns(this.data);
  }

  groupColumns(arrays) {
    const newRows = [];
    for (let index = 0; index < arrays.length; index += 3) {
      newRows.push(arrays.slice(index, index + 3));
    }
    return newRows;
  }

в HTML: 

<table>
    <caption> Numbers:</caption>
    <tr *ngFor="let result of results">
        <td>{{result[0]}}</td>
        <td>{{result[1]}}</td>
        <td>{{result[2]}}</td>
    </tr>
</table>

Рабочая демонстрация

...