Что же, начнем с добавления сообщений в наш 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 является структурной директивой, которая создает указанные элементы и помещает в них данные.
0 отзывов :
Отправить комментарий