angular模板与数据绑定

一. 数据显示

1. 使用插值表达式显示组件属性

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

JavaScript 中那些具有或可能引发副作用的表达式是被禁止的，包括：

• 赋值 (=, +=, -=, ...)
• new运算符
• 使用;或,的链式表达式
• 自增或自减操作符 (++和--)

模板是包在 ECMAScript 2015 反引号 () 中的一个多行字符串。 反引号 () — 注意，不是单引号 (') — 允许把一个字符串写在多行上， 使 HTML 模板更容易阅读。

注意，我们没有调用 new 来创建AppComponent类的实例，是 Angular 替我们创建了它。

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

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

2.使用ngFor显示数组属性

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

ngFor用于显示一个“数组”， 但ngFor可以为任何可迭代的 (iterable) 对象重复渲染条目。

4. 使用NgForOf显示数组属性

• index: number: The index of the current item in the iterable.
• count: number:
• first: boolean: True when the item is the first item in the iterable.
• last: boolean: True when the item is the last item in the iterable.
• even: boolean: True when the item has an even index in the iterable.
• odd: boolean: True when the item has an odd index in the iterable.

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">