Angular2英雄教程-英雄类

Question

在英雄类临时存储在app.component.ts上的部分中，我不确定将脚本粘贴到下面说明我们必须重构的地方。

英雄:英雄={ id: 1，名字：‘暴风’}；

将其放入app.component.ts文件中会出现错误。在最终版本中，这个类似乎是一个独立的文件，但现在，我应该能够在Chrome中看到英雄的名字，而它仍然在app.component.ts中。帮忙？

编辑:这是完整的代码。

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

export class Hero {
  id: number;
  name: string;
}

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})

export class AppComponent `enter code here`{
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

Answer 1

你的代码有两个问题。第一个是在类外部定义了属性hero，另一个是赋值hero = 'Windstorm'。你的类应该是这样的：

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

export class Hero {
    id: number;
    name: string;
}

@Component({
    selector: 'my-app',
    template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})
export class AppComponent {
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };

    title = 'Tour of Heroes';
}

这应该会让它工作。您最初将一个字符串分配给一个属性hero，使其隐式地成为一个字符串类型，但是随后您调用hero.name时希望它是一个Hero类型的对象。

Answer 2

这里的错误是您将Hero声明为一个类，并且不能动态创建一个类。

Hero是本教程中的一个接口，以便能够动态创建它。

只需替换

export class Hero {
  id: number;
  name: string;
}

由

export interface Hero {
  id: number;
  name: string;
}

这样你的代码就可以工作了。因为如果你想用这个类创建一个英雄，你必须这样做：

export class Hero {
  id: number;
  name: string;
}

let hero:Hero = new Hero();
hero.id= 1;
hero.name="Windstorm";

下面是完整的代码：

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

export interface Hero {
  id: number;
  name: string;
}

hero

@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})

export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };
}

Answer 3

我不确定这是否是正确的答案，但我现在坚持这样做。我发现非常奇怪的是，教程的复制没有起作用，但从它的一瞥，教程要我做的事情没有任何意义。基于我对Typescript的有限知识，请参阅下面的修订。这只有在以下情况下才有意义: 1)导出类英雄在本教程所建议的文档中没有意义，声明变量英雄需要"let“；2)必须修改导出AppComponent参数。

从‘@angular/core’导入{ Component }；

let hero = {
  id: 1,
  name: 'Windstorm'
};

@Component({
  selector: 'my-app',
  template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})

export class AppComponent {
  title = 'Tour of Heroes';
  hero = hero.name;
}