angular4类型脚本类，创建实例的3种方法，教程hero

我正在使用angular练习typescript，我需要了解如何使用3种不同的方法来创建实例。我像angular hero教程一样创建了第一个实例：hero1，但我不知道hero2和hero3是否有效。我正在试着在模板上打印3个英雄的名字

守则：

app.component.js

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
hero: Hero = {
  id: 1,
  name: 'Flash'
}
@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1><h2>Hero1: {{hero.name}} , Hero2:  {{hero2.name}} , Hero3: {{hero3.name}}</h2>`,
})
export class AppComponent    {
  public hero2: Hero;
  public hero3;

  title = 'Tour of Heros';
  ngOnInit() {
    this.hero2  =  {
      id: 2,
      name: 'Superman'
    };
    this.hero3  = new (3, 'Spiderman') ;
  }
}

从'@angular/core'导入{Component}；
出口级英雄{
id：编号；
名称：字符串；
}
英雄：英雄={
id:1，
名称：“闪光”
}
@组成部分({
选择器：“我的应用程序”，
模板：{{title}Hero1:{{hero.name}}，Hero2:{{Hero2.name}，Hero3:{{Hero3.name}}，
})
导出类AppComponent{
公众英雄2：英雄；
公共关系3；
标题=‘英雄之旅’；
恩戈尼尼特（）{
此.hero2={
id:2，
名字：“超人”
};
this.hero3=新（3，‘蜘蛛侠’）；
}
}

在这里，代码使用3种方法解决（感谢答案）：

从'@angular/core'导入{Component}；
出口级英雄{
id：编号；
名称：字符串；
构造函数（id:编号，名称：字符串）{
this.id=id；
this.name=名称；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：{{title}Hero1:{{hero.name}}，Hero2:{{Hero2.name}，Hero3:{{Hero3.name}}，
})
导出类AppComponent{
英雄：英雄={
id:1，
名称：“闪光”
}
标题=‘英雄之旅’；
公众英雄2：英雄；
公众英雄3：英雄；
恩戈尼尼特（）{
此.hero2={
id:2，
名字：“超人”
};
this.hero3=新英雄（3，“蜘蛛侠”）；
}
}

您想要的是这样的：

从'@angular/core'导入{Component，OnInit}；
出口级英雄{
id：编号；
名称：字符串；
//例如，这允许您调用'newhero（1，'Flash'）'
构造函数（id:编号，名称：字符串）{
this.id=id；
this.name=名称；
}
}
//您的英雄类也可以是这样，因为TypeScript非常棒
//出口级英雄{
//构造函数（public id:number，public name:string）{}
// }
@组成部分({
选择器：“我的应用程序”，
模板：`
{{title}}
英雄{{Hero.id}:{{Hero.name}
{{title}}
{{hero.id}:{{hero.name}
`
})
导出类AppComponent实现OnInit{
英雄：英雄[]；//一个bucket-o-heros（数组），可以根据您的需要增减大小。
标题=‘英雄之旅’；
//在初始化组件时调用该函数
恩戈尼尼特（）{
//这将填充AppComponent的公共属性，AppComponent是一个英雄数组
这是一位英雄=[
新英雄（1，“闪电侠”），
《新英雄》（2，《超人》），
新英雄（3，《蜘蛛侠》）
]
}
}

你需要使用一个数组，这样当你的应用程序在某人的浏览器中运行时，你可能希望他们能够实时添加更多英雄，这样就可以有一个方法将他们创建的英雄附加到数组中。您编写代码的方式不允许添加更多的英雄，因为它们中的三个被组件的单个公共属性引用

如果您想在传递

id

和

名称时创建新的构造函数，那么您的英雄类中还需要一个构造函数

希望这有帮助！玩得开心
 您需要创建英雄对象数组，如

this.heroes = [
      new Hero(1, 'XXX'),
      new Hero(2, 'YYY'),
      new Hero(3, 'ZZZ')
    ];

如果使用这种方法，则必须在hero组件类中具有初始化对象的构造函数

在此之后，使用ngFor i:e Structural指令，您可以在模板中打印结果

像

请查看此链接以了解更多角度概念

this
this.hero3=new（3，“蜘蛛侠”）不是有效的语法。也许您想实例化一个新的
英雄
？所以应该是这样的：
this.hero3=新英雄（3，'Spiderman'）。。。你还必须为
Hero
类定义构造函数。谢谢，但我只是想用不同的方法使用不同的变量，hero1符合angular教程，hero2如何使用这个方法？谢谢，我已经用你的device@DDave,我不知道你用不同的方法使用不同的变量是什么意思。但是你可以从数组中取出你想要的英雄，在你需要使用它的方法中将它分配给一个局部变量，然后从那里开始。这就是你的意思吗？不管怎样，谢谢你，我只记了一个答案valid@DDave如果你觉得答案符合要求，你可以投票给他，即使是杰克也可以接受并投票给他
this.heroes = [
      new Hero(1, 'XXX'),
      new Hero(2, 'YYY'),
      new Hero(3, 'ZZZ')
    ];

<div *ngFor =  "let hero of heroes">
    {{hero.id}} -- {{hero.name}}
</div>

this.heroes = [
{name: 'XXXX',id : '1'},
{name: 'YYY',id : '2'}
];