#3 Angular2. Тур героев. Редактирование героя

poster
В этом уроке мы напишем вывод информации о герое и его редактирование для тура героев в angular 2.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. Это третий урок в серии тур героев по angular 2. В этом уроке мы создадим базовый шаблон героя и реализуем редактирование его имени.

Давайте откроем файл app/app.component.ts И добавим 2 поля в наш класс AppComponent.

export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

Теперь давайте обновим template. Сейчас в темплейте у нас выводится просто

template: '<h1>My First Angular 2 App</h1>'

Давайте изменим это на

template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'

Если мы откроем браузер, то мы увидим, что у нас вывелось Tour of Heroes и Windstorm details. Как мы видим, это очень хороший пример одностороннего биндинга. Все переменные внутри класса указываются через знак = , как обычное присвоение переменных, а не через : как в обьекте. Для того, чтобы использовать в шаблоне односторонний биндинг мы пишем переменные в двойных фигурных скобках. Односторонний биндинг отличается от двухстороннего тем, что данные из модели выводятся на экран, но обратно данные с экрана в модель не попадают при изменении.

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

export class Hero {
  id: number;
  name: string;
}

Мы написали класс героя у которого указали возможные поля и их типы. Теперь давайте изменим переменную hero указав ей тип Hero и определив поля

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

И изменим наш шаблон так как hero у нас теперь стал обьектом

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'

Как мы видим в браузере все так же выводятся title и name.

Давайте добавим больше информации о герое

template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

Теперь если мы посмотрим в браузер, то у нас вывелись id и name героя.

Как мы видим наш шаблон уже выглядит нечитабельно. Поэтому давайте перепишем его на es6 строки для шаблонов чтобы код выглядел лучше. Для этого используем специальные кавычки.

template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

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

Теперь давайте реализуем редактирование героя. Для этого добавим input с моделью.

template:`
  <h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>
  `

Как мы видим, здесь у нас используется специальный синтаксис ngModel, который выводит у нас переменную hero.name. Для того чтобы использовать двухсторонний биндинг мы используем вот такую запись

<input [(ngModel)]="hero.name" placeholder="name">

Такая запись обновляет модель при изменении.

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

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.