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

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

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

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

1
import { Hero } from './hero';
2

3
export const HEROES: Hero[] = [
4
  { id: 11, name: 'Mr. Nice' },
5
  { id: 12, name: 'Narco' },
6
  { id: 13, name: 'Bombasto' },
7
  { id: 14, name: 'Celeritas' },
8
  { id: 15, name: 'Magneta' },
9
  { id: 16, name: 'RubberMan' },
10
  { id: 17, name: 'Dynama' },
11
  { id: 18, name: 'Dr IQ' },
12
  { id: 19, name: 'Magma' },
13
  { id: 20, name: 'Tornado' }
14
];

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

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

1
import { HEROES } from '../mock-heroes';

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

1
export class HeroesComponent implements OnInit {
2

3
  heroes = HEROES;

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

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

Добавим заголовок
Под ним тег списка
- Далее внутри тега
  - в которых будут выводиться hero
```
1
<h2>My Heroes</h2>
2
<ul class="heroes">
3
  <li>
4
    <span class="badge">{{hero.id}}</span> {{hero.name}}
5
  </li>
6
</ul>
```
  Теперь изменим наш тег
- ```
1
<li *ngFor="let hero of heroes">
```
  *ngFor - деректива повторения Angular. Он повторяет элемент хоста для каждого элемента в списке.
  
  Не забываем звездочку (*) перед ngFor. Это критическая часть синтаксиса.
  
  После обновления страницы мы должны увидеть список.
  
  Застайлим “героев”
  
  Список героев должен быть привлекательным и должен визуально реагировать, когда пользователи наводятся и выбирают героя из списка.
  
  В первом уроке “Введение в Angular 6” мы установили базовые стили для всего приложения в styles.css. Эта таблица стилей не содержит стилей для списка.
  
  Мы можем продолжать расширять эту таблицу стилей но мы пойдем другим путем и используем стили компонента.
  
  Стили и таблицы стилей, идентифицированные в метаданных @Component, привязаны к этому конкретному компоненту. Стили heroes.component.css применяются только к HeroesComponent и не влияют на внешний HTML или HTML в любом другом компоненте.
  
  Отображение подробной информации
  
  Когда пользователь нажимает на героя в главном списке, компонент должен отображать детали выбранного героя внизу страницы.
  
  Мы будете прослушивать событие click item героя и обновлять детали героя в низу страницы.
  
  Привязка события click к
- делается следующим образом:
```
1
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
```
  Пример синтаксиса привязки события Angular.
  
  Скобки вокруг клика указывают, что нужно прослушать событие click элемента
- . Когда пользователь нажимает на
- , Angular выполняет метод onSelect(hero).
  
  onSelect () - это метод HeroesComponent, который мы напишем чуть позже. Angular 6 вызывает его с объектом героя, отображаемым в
- .
  
  Переименуем свойство hero компонента в selectedHero, но не назначим его. Когда приложение запускается, героя нет и добавим метод onSelect(), который назначает героя по клику из шаблона выбранному компоненту Hero.
```
1
selectedHero: Hero;
2
onSelect(hero: Hero): void {
3
  this.selectedHero = hero;
4
}
```
  Теперь нам нужно обновить шаблон
```
1
<h2>{{selectedHero.name | uppercase}} Details</h2>
2
<div><span>id: </span>{{selectedHero.id}}</div>
3
<div>
4
  <label>name:
5
    <input [(ngModel)]="selectedHero.name" placeholder="name">
6
  </label>
7
</div>
```
  Кликнув на героя мы получим ошибку в консоли разработчика:
```
1
HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined
```
  Теперь кликнем еще по одному элементу из списка. Кажется, что приложение заработало. Герои появляются в списке, и описание выбраного героя появляются в нижней части страницы.
  
  Почему так происходит?
  
  Когда приложение запускается, selectedHero не определен.
  
  Связывание выражений в шаблоне, относящееся к свойствам selectedHero - выражений типа {{selectedHero.name}}, должно завершиться неудачей, потому что нет выбранного героя.
  
  Чтобы это исправить нам нужно воспользоваться еще одной дерективой - *ngIf.
```
1
<div *ngIf="selectedHero">
2

3
  <h2>{{selectedHero.name | uppercase}} Details</h2>
4
  <div><span>id: </span>{{selectedHero.id}}</div>
5
  <div>
6
    <label>name:
7
      <input [(ngModel)]="selectedHero.name" placeholder="name">
8
    </label>
9
  </div>
10

11
</div>
```
  Почему работает?
  
  Когда selectedHero не определен, ngIf удаляет деталь героя из DOM. Нет никаких привязок к selectedHero.
  
  Когда пользователь выбирает героя, selectedHero получает значение, а ngIf помещает деталь героя в DOM.
  
  Застайлим выбраного персонажа
  
  Трудно определить выбранного героя в списке, когда все элементы
- выглядят одинаково.
  
  Если пользователь нажимает «Magneta», этот герой должен отображать с характерным, но тонким цветом фона, как например:
  
  Выбранная окраска героя - это работа класса СSS .selected который мы добавили ранее. На просто нужно применить класс .selected когда пользователь нажмет на него.
  
  Angular упрощает добавление и удаление СSS класса. Достаточно добавить [class.some-css-class]=“some-condition” на нужный нам элемент
```
1
<li *ngFor="let hero of heroes"
2
  [class.selected]="hero === selectedHero"
3
  (click)="onSelect(hero)">
4
  <span class="badge">{{hero.id}}</span> {{hero.name}}
5
</li>
```
  Code review
```
1
import { Component, OnInit } from '@angular/core';
2
import { Hero } from '../hero';
3
import { HEROES } from '../mock-heroes';
4

5
@Component({
6
  selector: 'app-heroes',
7
  templateUrl: './heroes.component.html',
8
  styleUrls: ['./heroes.component.css']
9
})
10

11
export class HeroesComponent implements OnInit {
12

13
  heroes = HEROES;
14
  selectedHero: Hero;
15

16
  constructor() { }
17

18
  ngOnInit() {
19
  }
20

21
  onSelect(hero: Hero): void {
22
    this.selectedHero = hero;
23
  }
24
}
```
```
1
<h2>My Heroes</h2>
2
<ul class="heroes">
3
  <li *ngFor="let hero of heroes"
4
    [class.selected]="hero === selectedHero"
5
    (click)="onSelect(hero)">
6
    <span class="badge">{{hero.id}}</span> {{hero.name}}
7
  </li>
8
</ul>
9

10
<div *ngIf="selectedHero">
11

12
  <h2>{{selectedHero.name | uppercase}} Details</h2>
13
  <div><span>id: </span>{{selectedHero.id}}</div>
14
  <div>
15
    <label>name:
16
      <input [(ngModel)]="selectedHero.name" placeholder="name">
17
    </label>
18
  </div>
19

20
</div>
```
```
1
/* HeroesComponent's private CSS styles */
2
.selected {
3
  background-color: #CFD8DC !important;
4
  color: white;
5
}
6
.heroes {
7
  margin: 0 0 2em 0;
8
  list-style-type: none;
9
  padding: 0;
10
  width: 15em;
11
}
12
.heroes li {
13
  cursor: pointer;
14
  position: relative;
15
  left: 0;
16
  background-color: #EEE;
17
  margin: .5em;
18
  padding: .3em 0;
19
  height: 1.6em;
20
  border-radius: 4px;
21
}
22
.heroes li.selected:hover {
23
  background-color: #BBD8DC !important;
24
  color: white;
25
}
26
.heroes li:hover {
27
  color: #607D8B;
28
  background-color: #DDD;
29
  left: .1em;
30
}
31
.heroes .text {
32
  position: relative;
33
  top: -3px;
34
}
35
.heroes .badge {
36
  display: inline-block;
37
  font-size: small;
38
  color: white;
39
  padding: 0.8em 0.7em 0 0.7em;
40
  background-color: #607D8B;
41
  line-height: 1em;
42
  position: relative;
43
  left: -1px;
44
  top: -4px;
45
  height: 1.8em;
46
  margin-right: .8em;
47
  border-radius: 4px 0 0 4px;
48
}
```
  Итоги
  - Приложение Tour of Heroes отображает список героев в представлении «Мастер / Деталь».
  - Пользователь может выбрать героя и посмотреть подробности
  - Использовали * ngFor для отображения списка.
  - Использовали * ngIf для условного включения или исключения блока HTML.

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

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

Застайлим “героев”

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

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

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

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

Code review

Итоги