angular---小白学习笔记摘要（连载中）

为数据创建一个类

应用代码直接在组件内部直接定义了数据。 作为演示还可以，但它显然不是最佳实践。

现在使用的是到了一个字符串数组的绑定。在真实的应用中，大多是到一个对象数组的绑定。

要将此绑定转换成使用对象，需要把这个英雄名字数组变成 Hero 对象数组。但首先得有一个 Hero 类。

content_copyng generate class hero

代码如下：

src/app/hero.ts

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

你定义了一个类，具有一个构造函数和两个属性：id 和 name。

它可能看上去不像是有属性的类，但它确实有，利用的是 TypeScript 提供的简写形式 —— 用构造函数的参数直接定义属性。

来看第一个参数：

src/app/hero.ts (id)

content_copypublic id: number,

这个简写语法做了很多：

• 声明了一个构造函数参数及其类型。

• 声明了一个同名的公共属性。

• 当创建该类的一个实例时，把该属性初始化为相应的参数值。

 

使用 Hero 类

导入了 Hero 类之后，组件的 heroes 属性就可以返回一个类型化的Hero 对象数组了。

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

content_copyheroes = [
  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)

content_copytemplate: `
  <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>