如何在typescript构造函数中将数组对象转换为字符串?

时间:2016-10-04 15:03:43

标签: angular typescript

最近,我开始学习Angular 2,其中包含有关打字稿的基本知识。所以,我试图使用构造函数来计算代码。但我在VS代码编辑器中遇到类型错误,也无法在浏览器中获得预期的输出。我正在分享下面的代码并附上截图。如果有人告诉我如何将Array中的Object转换为typescript构造函数中的字符串会非常有用吗?

以下是代码:

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

import { Hero } from './hero';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: string;
  heroes: Array<Hero>;
  myHero: string;

  constructor() {
    this.title = "Tour Of Heroes";
    this.heroes = [
      new Hero(1, 'Windstorm'),
      new Hero(13, 'Bombasto'),
      new Hero(15, 'Magneta'),
      new Hero(20, 'Tornado')
    ];
    this.myHero = this.heroes[0];
  }
}

截图: VS Code Browser

作者提供了从评论中复制的代码:

<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
  <li *ngFor="let hero of heroes"> {{ hero }} </li>
</ul>

2 个答案:

答案 0 :(得分:2)

this.myHero = this.heroes[0].name; // display the name

或者,如果您想将所选英雄保留为对象,则在模板中显示该名称。

app.component.html

{{myHero.name}}

对于数组,你需要遍历它并在数组本身的对象上显示一些有趣的东西。

<div *ngFor="#hero of heroes">
  {{hero.name}}
</div>

根据您的评论,这是您的固定代码,它显示myHero实例的名称以及来自heros数组的循环。

<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>

答案 1 :(得分:1)

您要将 Hero class 对象分配给字符串变量,而 。因此,不要将其更改为字符串,而是使用 Hero类类型 声明它。所以,

myHero: string;

将其更改为

myHero: Hero;

在模板中使用它与属性,

<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>