Цикл ngFor в Angular 2

Этот пост охватывает циклы в шаблонах Angular 2 через *ngFor. Это почти тоже самое, как и ng-repeat в AngularJS, но с небольшими различиями в синтаксисе.

Что же, начнем с добавления сообщений в наш MailService. Создадим простой массив и добавим тестовые сообщения: 'Новое сообщение!',  'Сообщение было удалено' и 'Добавить отзыв'.

mail.service.ts

@Injectable()
export class MailService {
  messages = [
    `Новое сообщение!`,
    `Сообщение было удалено`,
    `Добавить отзыв`
  ]
  constructor() { }
}

Эти сообщения из нашего MailService мы можем вывести в app.component. Очистим шаблон для компонента и просто добавим mail сервис в конструктор.

app.component.ts

@Component({
  selector: 'app-root',
  template: ``
})
export class AppComponent {
  constructor(
    @Inject('mail') private mail
  ){}
}

Также, добавим ненумерованный список с элементами внутри. Мы хотим создать элемент списка для каждого сообщения, которые у нас есть. Для этого пропишем в шаблоне *ngFor. F должна быть заглавная. Затем, необходимо указать значение атрибута let message of mail.messages. mail - это mail сервис c нашими сообщениями, которые мы добавили.

app.component.ts

template: `<div>
<ul>
  <li *ngFor="let message of mail.messages">
    {{message}}
  </li>
</ul>
</div>`

Теперь переменная message может быть использована внутри цикла для каждого сообщения в списке. Просто выведем ее {{message}} в скобках и сохраним файл. Сообщения отобразятся списком на странице браузера.

Возможно, вам будет интересно зачем нужна звездочка *. Этот синтаксис просто указывает на то, что родительский элемент будет использоваться как шаблон в цикле. И данные просто подставятся в него. ngFor является структурной директивой, которая создает указанные элементы и помещает в них данные.