Как переключаться между макетом сетки и макетом списка в angular 2

#angular #typescript #layout

#angular #typescript #макет

Вопрос:

Использование angular 2.0.0 для создания приложения. Я хотел бы отобразить список пользователей в двух разных вариантах макета, чтобы пользователь мог переключаться между «макетом сетки», который будет отображать информацию о пользователях в виде карточек, и «макетом списка», который будет отображать информацию в табличном формате.

Каков наилучший способ добиться этого? Несколько вариантов, которые я исследовал:

  • использование *ngFor для отображения данных как a table , так и cards in a
    grid
    и *ngIf для отображения одного или другого на основе переключателя.
  • использование двух разных шаблонов <template> , одного для table макета, а другого для cards in a grid макета, и использование ViewChild для отображения одного или другого на основе переключателя.

Может быть, какой-то другой способ добиться этого?

Комментарии:

1. было бы здорово, если бы вы достигли этого с помощью классов css. Несмотря на то, что он занимает много времени, он уменьшает повторяемость кода и размер приложения

Ответ №1:

Решили сделать это, используя два разных шаблона и тумблер. Кажется, лучшее решение до сих пор в последней версии angular.