Question

我是Angular 2的初学者，并且使用下面的教程和文档从官方网站学习它是代码： -

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

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

const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

@Component({
  selector: 'app-root',
  template:`
  <h1>{{ top }}</h1>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>
`
})


export class AppComponent {
  top = 'Tour of Heroessss';
  heroes = HEROES;
}

编译代码时，我无法显示名称以及标签（使用插值）仅显示项目符号并显示。

还尝试在AppComponent类中添加整个对象，但结果仍然相同。

该项目不包含任何代码.html或.css文件，并且未更改“app.component.spec.ts”或“app.module.ts”或“index.ts”中的任何代码。

任何人都知道我真正想念的是什么。

Answer 1

您的组件和模块应如下所示：

import { Component, NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'

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

const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

@Component({
  selector: 'app-root',
  template:`
  <h1>{{ top }}</h1>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>
`
})    
export class AppComponent {
  top: string = 'Tour of Heroessss';
  heroes : Hero[] = HEROES;

  // You need to set hero property
  hero: Hero = HEROES[0];
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Answer 2

可能您可以尝试以下事项：

首先，将top和heroes声明为 public （在AppComponent中）
如果第一个不起作用，请删除let（来自ngFor并使用＃）例如： * ngFor =“＃英雄英雄”

Answer 3

tl; dr ：问题出在这个div

  <div>
    <label>name: </label>
    <input [(ngModel)]="hero.name" placeholder="name">
  </div>

正如某人所提到的，您不能在此处使用hero.name，因为该div已经在*ngFor指令之外。

完整的故事/工作代码

好像您在本教程的上一部分中添加了代码。但是，上一部分仅指定了一位英雄。由于我们已经在hero文件中将heroes替换为.ts，因此我们需要更改代码，以便我们仍然可以访问hero的信息。

如果您取出我上面提取的代码并运行，那么它将起作用。这是一个类似的。

<h2>My Heroes</h2>
<div>
    <ul class="heroes">
        <li *ngFor="let hero of heroes">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
        </li>
    </ul>
</div>

如果要包括输入框，则需要再次使用中继器指令*ngFor="let hero of heroes"，如下所示：

<h2>My Heroes</h2>
<div>
    <ul class="heroes">
        <li *ngFor="let hero of heroes">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
        </li>
    </ul>
</div>

<li *ngFor="let hero of heroes">
    <div>
        <label for="name"></label>
        <input [(ngModel)]="hero.name" type="text" placeholder="name"/>
    </div>
</li>

需要帮助第一个角度2应用程序无法显示对象的数据

3 个答案: