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

В этой главе мы расскажем, как отображать данные в пользовательском интерфейсе. Можно использовать следующие три способа:

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

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

Чтобы отобразить свойство компонента, проще всего использовать интерполяцию. Формат:{{propertyName}}。

Следующий код создан на основеконфигурации окружения Angular 2 TypeScript. Вы можете скачать исходный код в той главе и изменить файлы, упомянутые ниже.

Файл app/app.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Мои любимые сайты:{{mySite}}</h2> ` }) export class AppComponent { title = 'Список сайтов'; mySite = 'Пример'; }

Angular автоматически извлечёт значения свойств title и mySite из компонента и отобразит их в браузере. Отображаемая информация выглядит следующим образом:

Примечание:Шаблон — это многострочная строка, заключённая в обратные кавычки (`), а не в одинарные кавычки (').

Использование ngFor для отображения свойств массива

Мы также можем перебрать несколько сайтов. Измените следующий файл:

Файл app/app.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Мои любимые сайты:{{mySite}}</h2> <p>Список сайтов:</p> <ul> <li *ngFor="let site of sites"> {{ site }} </li> </ul> ` }) export class AppComponent { title = 'Список сайтов'; sites = ['Пример', 'Google', 'Taobao', 'Facebook']; mySite = this.sites[0]; }

В коде мы используем директиву ngFor из Angular в шаблоне, чтобы отобразить каждую запись в списке sites. Не забудьте ведущую звёздочку (*) в *ngFor.

После изменения браузер отображает следующее:

В примере ngFor перебирает массив. Фактически ngFor может перебирать любой итерируемый объект.

Далее мы создаём файл site.ts в каталоге app. Код выглядит следующим образом:

Файл app/site.ts:

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

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

Далее мы перебираем в цикле и выводим свойство name класса Site:

Файл app/app.component.ts:

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Мои любимые сайты:{{mySite.name}}</h2> <p>Список сайтов:</p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> ` }) export class AppComponent { title = 'Список сайтов'; sites = [ new Site(1, 'Example'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

После изменения браузер отображает следующее:

Условное отображение с NgIf

Мы можем использовать NgIf для условного вывода данных.

В следующем примере мы проверяем, превышает ли количество сайтов 3, и выводим подсказку: Измените следующий файл app.component.ts. Код выглядит следующим образом:

Файл app/app.component.ts:

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>Мои любимые сайты:{{mySite.name}}</h2> <p>Список сайтов:</p> <ul> <li *ngFor="let site of sites"> {{ site.name }} </li> </ul> <p *ngIf="sites.length > 3">У вас много любимых сайтов!</p> ` }) export class AppComponent { title = 'Список сайтов'; sites = [ new Site(1, 'Example'), new Site(2, 'Google'), new Site(3, 'Taobao'), new Site(4, 'Facebook') ]; mySite = this.sites[0]; }

После изменения браузер отображает следующее, с дополнительным сообщением-подсказкой внизу:

Другие расширения