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）出口类英雄在本教程中没有意义，如教程所暗示的那样，宣称变量英雄需要＆＃34;让＆＃34; 2）必须修改导出AppComponent args。

从@ angular / core＆＃39;;

导入{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;
}

Answer 4

您不需要导出它;或者您可以创建新的TS文件并创建新的类被叫用户，如：

export class User {
 private name:string

 constructor...
 get && setter here...

    }

并导入到您的组件文件并构建它

Angular2 Hero Tutorial - 英雄课

4 个答案: