Spec-Zone.ru › Angular 2

Отображение данных

Связывание свойств помогает отображать данные приложения в пользовательском интерфейсе.

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

На этой странице вы создадите компонент со списком героев. Вы отобразите список имён героев и условно отобразите сообщение под списком.

Конечный пользовательский интерфейс выглядит следующим образом:

Final UI

Содержание

  • Отображение свойств компонента с помощью интерполяции.
  • Отображение свойства массива с помощью NgFor.
  • Условное отображение с помощью NgIf.

Живой пример демонстрирует всю синтаксис и фрагменты кода, описанные на этой странице.

Отображение свойств компонента с помощью интерполяции

Самый простой способ отобразить свойство компонента — связать имя свойства через интерполяцию. В интерполяции вы помещаете имя свойства в шаблон представления, заключённое в двойные фигурные скобки: {{myHero}}.

Следуйте инструкциям настройки для создания нового проекта с именем .

Затем измените файл , изменив шаблон и тело компонента.

Когда вы закончите, он должен выглядеть так:

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}

Вы добавили два свойства в ранее пустой компонент: title и myHero.

Переработанный шаблон отображает два свойства компонента с помощью интерполяции в двойных фигурных скобках:

template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero}}</h2>
  `

Шаблон — это строка с несколькими строками в ECMAScript 2015 в обратных кавычках (`). Обратная кавычка (`) — это не тот же символ, что и одинарная кавычка (') — позволяет составлять строку на нескольких строках, что делает HTML более читаемым.

Angular автоматически извлекает значение свойств title и myHero из компонента и вставляет эти значения в браузер. Angular обновляет отображение при изменении этих свойств.

Более точно, повторное отображение происходит после какого-либо асинхронного события, связанного с представлением, такого как нажатие клавиши, завершение таймера или ответ на HTTP-запрос.

Обратите внимание, что вы не вызываете new для создания экземпляра класса AppComponent. Angular создает экземпляр для вас. Как?

CSS selector в декораторе @Component указывает на элемент с именем <my-app>. Этот элемент является заглушкой в теле файла index.html.

src/index.html (body)

<body>
  <my-app>loading...</my-app>
</body>

При загрузке с классом AppComponent (в ), Angular ищет <my-app> в index.html, находит его, создаёт экземпляр класса AppComponent и отображает его внутри тега <my-app>.

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

Title and Hero

В следующих разделах рассматриваются некоторые варианты кода в приложении.

Шаблон встроенный или в отдельном файле?

Вы можете хранить шаблон компонента в одном из двух мест. Вы можете определить его встроенным способом, используя свойство template, или определить шаблон в отдельном HTML-файле и связать его с компонентом в метаданных, используя свойство декоратора @Component templateUrl.

Выбор между встроенным и отдельным HTML — это вопрос вкуса, обстоятельств и политики организации. Здесь приложение использует встроенный HTML, поскольку шаблон небольшой, а демонстрация проще без дополнительного HTML-файла.

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

Конструктор или инициализация переменной?

Хотя этот пример использует присвоение переменной для инициализации компонентов, вы можете вместо этого объявить и инициализировать свойства с помощью конструктора:

src/app/app-ctor.component.ts (class)

export class AppCtorComponent {
  title: string;
  myHero: string;

  constructor() {
    this.title = 'Tour of Heroes';
    this.myHero = 'Windstorm';
  }
}

Это приложение использует более краткий стиль «присвоение переменной» просто для краткости.

Отображение массива свойств с помощью *ngFor

Чтобы отобразить список героев, начните с добавления массива имён героев в компонент и переопределите myHero на первое имя в массиве.

src/app/app.component.ts (class)

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
}

Теперь используйте директиву Angular ngFor в шаблоне, чтобы отобразить каждый элемент в списке heroes.

src/app/app.component.ts (template)

  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    <p>Heroes:</p>
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
  `

Этот пользовательский интерфейс использует HTML-несмаркированный список с тегами <ul> и <li>. *ngFor в элементе <li> является директивой Angular «повторитель». Он отмечает элемент <li> (и его потомков) как «шаблон повторения»:

<li *ngFor="let hero of heroes">
  {{ hero }}
</li>

Не забудьте ведущую звёздочку (*) в *ngFor. Это важная часть синтаксиса. Дополнительную информацию см. на странице Синтаксис шаблона.

Обратите внимание на hero в двойных кавычках ngFor инструкции; это пример переменной ввода шаблона. Подробнее о переменных ввода шаблона см. в разделе микросинтаксис на странице Синтаксис шаблона.

Angular дублирует <li> для каждого элемента в списке, устанавливая переменную hero в элемент (героя) в текущей итерации. Angular использует эту переменную в качестве контекста для интерполяции в двойных фигурных скобках.

В этом случае, ngFor отображает массив, но ngFor может повторять элементы для любого итерируемого объекта.

Теперь герои отображаются в несмаркированном списке.

After ngfor

Создание класса для данных

Код приложения определяет данные непосредственно внутри компонента, что не является лучшей практикой. Однако в простом демо это нормально.

В данный момент привязка выполняется к массиву строк. В реальных приложениях большинство привязок выполняется к более специализированным объектам.

Чтобы преобразовать эту привязку в использование специализированных объектов, преобразуйте массив имён героев в массив объектов Hero. Для этого вам понадобится класс Hero.

Создайте новый файл в папке app с именем с указанным кодом:

src/app/hero.ts (excerpt)

export class Hero {
  constructor(
    public id: number,
    public name: string) { }
}

Вы определили класс с конструктором и двумя свойствами: id и name.

Возможно, не кажется, что класс имеет свойства, но это так. Объявление параметров конструктора использует сокращение TypeScript.

Рассмотрим первый параметр:

src/app/hero.ts (id)

public id: number,

Этот короткий синтаксис делает многое:

  • Объявляет параметр конструктора и его тип.
  • Объявляет общедоступное свойство с тем же именем.
  • Инициализирует это свойство соответствующим аргументом при создании экземпляра класса.

Использование класса Hero

После импорта класса Hero свойство AppComponent.heroes может возвращать типизированный массив объектов Hero:

src/app/app.component.ts (heroes)

heroes = [
  new Hero(1, 'Windstorm'),
  new Hero(13, 'Bombasto'),
  new Hero(15, 'Magneta'),
  new Hero(20, 'Tornado')
];
myHero = this.heroes[0];

Далее, обновите шаблон. В данный момент он отображает свойства id и name героя. Исправьте это, чтобы отобразить только свойство name героя.

src/app/app.component.ts (template)

template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero.name}}</h2>
  <p>Heroes:</p>
  <ul>
    <li *ngFor="let hero of heroes">
      {{ hero.name }}
    </li>
  </ul>
`

Отображение выглядит одинаково, но код более понятен.

Условное отображение с помощью NgIf

Иногда приложение должно отображать представление или часть представления только при определённых обстоятельствах.

Давайте изменим пример, чтобы отобразить сообщение, если героев больше трёх.

Директива Angular ngIf вставляет или удаляет элемент на основе истинного/ложного условия. Чтобы увидеть его в действии, добавьте следующий абзац в нижнюю часть шаблона:

src/app/app.component.ts (message)

<p *ngIf="heroes.length > 3">There are many heroes!</p>

Не забудьте ведущую звёздочку (*) в *ngIf. Это важная часть синтаксиса. Дополнительную информацию о ngIf и * см. в разделе ngIf на странице Синтаксис шаблона.

Выражение шаблона в двойных кавычках, *ngIf="heros.length > 3", выглядит и ведёт себя очень похоже на TypeScript. Когда список героев компонента имеет более трёх элементов, Angular добавляет абзац в DOM, и сообщение отображается. Если элементов три или меньше, Angular опускает абзац, поэтому сообщение не отображается. Дополнительную информацию см. в разделе выражения шаблона на странице Синтаксис шаблона.

Angular не отображает и не скрывает сообщение. Он добавляет и удаляет элемент абзаца из DOM. Это улучшает производительность, особенно в больших проектах, при условном включении или исключении больших кусков HTML с множеством привязок данных.

Попробуйте это. Поскольку массив имеет четыре элемента, сообщение должно отображаться. Вернитесь в и удалите или прокомментируйте один из элементов из массива героев. Браузер должен автоматически обновиться, и сообщение должно исчезнуть.

Заключение

Теперь вы знаете, как использовать:

  • Интерполяцию с двойными фигурными скобками для отображения свойства компонента.
  • ngFor для отображения массива элементов.
  • Класс TypeScript для формирования модельных данных для вашего компонента и отображения свойств этой модели.
  • ngIf для условного отображения блока HTML на основе булевого выражения.

Вот окончательный код:

src/app/app.component.ts
import { Component } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'my-app',
  template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero.name}}</h2>
  <p>Heroes:</p>
  <ul>
    <li *ngFor="let hero of heroes">
      {{ hero.name }}
      </li>
  </ul>
  <p *ngIf="heroes.length > 3">There are many heroes!</p>
`
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = [
    new Hero(1, 'Windstorm'),
    new Hero(13, 'Bombasto'),
    new Hero(15, 'Magneta'),
    new Hero(20, 'Tornado')
  ];
  myHero = this.heroes[0];
}
src/app/hero.ts
export class Hero {
  constructor(
    public id: number,
    public name: string) { }
}
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Следующий шаг

Ввод пользователя

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v2.angular.io/docs/ts/latest/guide/displaying-data.html

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API