Question

我正在练习有角度的打字稿，我需要看看如何使用3种不同的方法来创建一个实例。我像示例角度英雄教程一样创建了第一个实例：hero1，但我没有得到那个英雄2和英雄3的作品。我正在尝试在模板上打印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') ;
  }
}

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

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

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


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

Answer 1

您需要创建一个Hero对象数组，如

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

如果您使用此方法，则必须在您的英雄组件类中具有初始化对象的构造函数。

使用ngFor i：e Structural Directive后，您可以在模板中打印结果。

喜欢

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

或下一种方法将像普通对象数组一样使用。

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

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

https://rahulrsingh09.github.io/AngularConcepts

Answer 2

你想要的是这样的：

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

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

  // This allows you to make the call `new Hero(1, 'Flash')` for example
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

// Your Hero class could also look like this because TypeScript is awesome
// export class Hero {
//   constructor(public id: number, public name: string) { }
// }

@Component({
  selector: 'my-app',
  template: `
<h1>{{title}}</h1>
<h2>
  <!-- if you want all of the heroes to appear in 
  the same <h2>...</h2> tag as you had it, this is
  one way you can do it.  `ng-template` ends up not
  appearing in the DOM -->
  <ng-template *ngFor="let hero of heroes">Hero{{hero.id}}: {{hero.name}}</ng-template>
</h2>

<!-- I'd suggest changing your template to something like this: -->
  <h1>{{title}}</h1>
  <h2 *ngFor="let hero of heroes">{{hero.id}}: {{hero.name}}</h2>
<!-- ... so that each hero gets its own <h2>...</h2> tag -->
`
})
export class AppComponent implements OnInit {
  heroes: Hero[]; // A bucket-o-heroes (array, rather) that can grow and shrink in size as you see fit.
  title = 'Tour of Heros';

  // This gets called when the component is initialized
  ngOnInit() {
    // This populates the public property of the AppComponent that is an array of Heroes
    this.heroes = [
      new Hero(1, 'Flash'),
      new Hero(2, 'Superman'),
      new Hero(3, 'Spiderman')
    ]
  }
}

您需要使用数组，以便当您的应用在某人的浏览器中运行时，您可能希望它们能够实时添加更多英雄，因此可能有一种方法可以将他们创建的英雄附加到数组。您拥有代码的方式不允许添加更多英雄，因为其中的三个是使用组件的各个公共属性引用的。

如果你想在传递id和name的同时制作新的构造函数，你还需要Hero课程中的构造函数。

希望这有帮助！和Angular一起玩！

angular4 typescript类，3个创建实例的方法，教程英雄

2 个答案: