4. Отображение списка в Angular

В этой статье мы поговорим о том как отобразить список при помощи angular, как выбрать элемент списка и просмотреть его детали.

В конечном итоге мы будем получать их с удаленного сервера данных. Но пока создадим некий макет героев и притворимся, что они пришли с сервера.

Создайте файл mock-heroes.ts в папке src / app /. Определите константу HEROES как массив из десяти героев и экспортируйте ее. Файл должен выглядеть так.

Выводим список angular с нашими героями

Отрефакторим уже созданный компонен HeroesComponent:

Изменим свойство heroes

Выводить список мы будим с помощью *ngFor

Откроем шаблон HeroesComponent и внесем некоторые изменения

  • Добавим заголовок <h2>
  • Под ним тег списка <ul>
  • Далее внутри тега <ul> теги <li> в которых будут выводиться hero

Теперь изменим наш тег <li>

*ngFor — деректива повторения Angular. Он повторяет элемент хоста для каждого элемента в списке.

Не забываем звездочку (*) перед ngFor. Это критическая часть синтаксиса.

После обновления страницы мы должны увидеть список.

Застайлим «героев»

Список героев должен быть привлекательным и должен визуально реагировать, когда пользователи наводятся и выбирают героя из списка.

В первом уроке «Введение в Angular 6»  мы установили базовые стили для всего приложения в styles.css. Эта таблица стилей не содержит стилей для списка.

Мы можем продолжать расширять эту таблицу стилей но мы пойдем другим путем и используем стили компонента.

Стили и таблицы стилей, идентифицированные в метаданных @Component, привязаны к этому конкретному компоненту. Стили heroes.component.css применяются только к HeroesComponent и не влияют на внешний HTML или HTML в любом другом компоненте.

Отображение подробной информации

Когда пользователь нажимает на героя в главном списке, компонент должен отображать детали выбранного героя внизу страницы.

Мы будете прослушивать событие click item героя и обновлять детали героя в низу страницы.

Привязка события click к <li> делается следующим образом:

Пример синтаксиса привязки события Angular.

Скобки вокруг клика указывают, что нужно прослушать событие click элемента <li>. Когда пользователь нажимает на <li>, Angular выполняет метод onSelect(hero).

onSelect () — это метод HeroesComponent, который мы напишем чуть позже. Angular 6 вызывает его с объектом героя, отображаемым в <li>.

Переименуем свойство hero компонента в selectedHero, но не назначим его. Когда приложение запускается, героя нет и добавим метод onSelect(), который назначает героя по клику из шаблона выбранному компоненту Hero.

Теперь нам нужно обновить шаблон

Кликнув на героя мы получим ошибку в консоли разработчика:

Теперь кликнем еще по одному элементу из списка. Кажется, что приложение заработало. Герои появляются в списке, и описание выбраного героя появляются в нижней части страницы.

Почему так происходит?

Когда приложение запускается, selectedHero не определен.

Связывание выражений в шаблоне, относящееся к свойствам selectedHero — выражений типа {{selectedHero.name}}, должно завершиться неудачей, потому что нет выбранного героя.

Чтобы это исправить нам нужно воспользоваться еще одной дерективой — *ngIf.

Почему работает?

Когда selectedHero не определен, ngIf удаляет деталь героя из DOM. Нет никаких привязок к selectedHero.

Когда пользователь выбирает героя, selectedHero получает значение, а ngIf помещает деталь героя в DOM.

Застайлим выбраного персонажа

Трудно определить выбранного героя в списке, когда все элементы <li> выглядят одинаково.

Если пользователь нажимает «Magneta», этот герой должен отображать с характерным, но тонким цветом фона, как например:

Выбранная окраска героя — это работа класса СSS .selected который мы добавили ранее. На просто нужно применить класс .selected когда пользователь нажмет на него.

Angular упрощает добавление и удаление СSS класса. Достаточно добавить [class.some-css-class]=»some-condition» на нужный нам элемент

Code review

Итоги

  • Приложение Tour of Heroes отображает список героев в представлении «Мастер / Деталь».
  • Пользователь может выбрать героя и посмотреть подробности
  • Использовали * ngFor для отображения списка.
  • Использовали * ngIf для условного включения или исключения блока HTML.

Leave a Reply

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.