Управление потоком в компонентах - @for

При разработке веб-приложений часто возникает необходимость повторить определенный код несколько раз — например, имея массив имен, вы можете захотеть отобразить каждое имя в теге <p>.

В этом упражнении вы узнаете, как использовать @for для повторения элементов в шаблоне.

Синтаксис, позволяющий повторять элементы в шаблоне — это @for.

Вот пример использования синтаксиса @for в компоненте:

@Component({
  ...
  template: `
    @for (os of operatingSystems; track os.id) {
      {{ os.name }}
    }
  `,
})
export class App {
  operatingSystems = [{id: 'win', name: 'Windows'}, {id: 'osx', name: 'macOS'}, {id: 'linux', name: 'Linux'}];
}

Обратите внимание на два момента:

• Префикс @ перед for используется потому, что это специальный синтаксис, называемый синтаксисом шаблонов Angular.
• Для приложений версии 16 и старше, пожалуйста, обратитесь к документации Angular по NgFor.

1. Add the users property

   В классе App добавьте свойство users, содержащее пользователей и их имена.

   [{id: 0, name: 'Sarah'}, {id: 1, name: 'Amy'}, {id: 2, name: 'Rachel'}, {id: 3, name: 'Jessica'}, {id: 4, name: 'Poornima'}]

2. Update the template

   Обновите шаблон, чтобы отобразить имя каждого пользователя в элементе p, используя синтаксис шаблона @for.

   @for (user of users; track user.id) {
     <p>{{ user.name }}</p>
   }

   ПРИМЕЧАНИЕ: использование track обязательно; вы можете использовать id или любой другой уникальный идентификатор.

Этот тип функциональности называется управлением потоком (control flow). Далее вы научитесь настраивать компоненты и взаимодействовать с ними — кстати, вы отлично справляетесь.