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

最新推荐文章于 2020-10-28 21:55:02 发布

LifeFuture1994

最新推荐文章于 2020-10-28 21:55:02 发布

阅读量217

点赞数

分类专栏：前端文章标签： angular 理论概念小白初学

前端专栏收录该内容

190 篇文章

订阅专栏

本文介绍如何通过定义Hero类来改进数据绑定，提高代码的可维护性和复用性。展示了如何利用TypeScript的特性简化类属性的声明，并通过实例化Hero类来创建英雄对象数组。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为数据创建一个类

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

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

要将此绑定转换成使用对象，需要把这个英雄名字数组变成 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>