Как создать заполненную таблицу Angular 2+ * ngFor с записью в каждой ячейке? - PullRequest
Новая
       14

Как создать заполненную таблицу Angular 2+ * ngFor с записью в каждой ячейке?

0 голосов
/ 05 июля 2018

Я пытаюсь создать адаптивную таблицу с неопределенным количеством строк и столбцов, в которой каждая ячейка заполнена вхождением записи Angular 2+ * ngFor.

Например, если в моем массиве 9 записей, а размер моей страницы содержит только 4 в каждой строке, я хочу 3 строки с 4 столбцами в следующем порядке: 

| 1 | 2 | 3 | 4 |

| 5 | 6 | 7 | 8 |

| 9 |

В этом случае мой массив похож на: 

imgList = [
    {name: '1', path: '/images/first/'},
    {name: '2', path: '/images/second/'},
    {name: '3', path: '/images/third/'},
    {name: '4', path: '/images/etc/'},
    {name: '5', path: '/images/etc/'},
    {name: '6', path: '/images/etc/'},
    {name: '7', path: '/images/etc/'},
    {name: '8', path: '/images/etc/'},
    {name: '9', path: '/images/etc/'}
];

и HTML-код: 

<div class="row">
  <div class="col-md-8">
    <div *ngFor="let image of imgList">
      {{image.name}}
    </div>
  </div>
</div>

В настоящее время мои изображения не отформатированы в таблице, как я могу дроу с объясненным стилем?

Спасибо всем. G.

1 Ответ

0 голосов
/ 05 июля 2018

Вам понадобится логика для разбиения массива на строки (массив 2d).

https://stackblitz.com/edit/record-in-every-cell?file=src/app/app.component.ts

Обновление: https://stackblitz.com/edit/record-in-every-cell-update?file=src%2Fapp%2Fapp.component.html

Обновление 2: Добавлена ​​trackImage функция для NgForOf ngForTrackBy, может помочь угловое повторное использование элементов, если пользовательский интерфейс усложняется. (edit: проверено, да, это работает несколько, если у вас есть trackBy для каждого ngFor, пример: если вы переключаетесь между 4 и 3 столбцами, он перерисовывает элементы td с 7 и 8 между началом 3-го и концом 2-й ряд, но повторно использует элемент с 9 init, но без trackBy он перерисовывает все каждый раз, когда изменяется столбец)

...