Question

我希望通过遍历数组来显示英雄列表我无法做到，因为它给出了数组的属性长度缺失。（见截图）

我的代码：在app.component.ts

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: 'my-app',
  template: `
  <h1>{{title}}</h1>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor=let hero of heroes"
            [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
  </ul>
      <div *ngIf="selectedHero">
      <h2>{{selectedHero.name}} details!</h2>
      <div><label>id: </label>{{selectedHero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
      </div>
    </div>
  `,
})
export class AppComponent  { 
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

我正在使用崇高的文字，所以当我将鼠标悬停在它上面时会给我一些错误，请看截图。其他一些错误是： 1）未使用的标签 2）逗号的左侧未使用

如何修复因const HEROES而导致的错误？

http://imgur.com/a/ZtoUu

Answer 1

我猜你正在关注Angular的英雄教程，对吧？因此，您可能希望将在线示例作为参考。首先，应该将英雄数组分配给这样的数组：

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' }
];

在您的代码中，错误地使用{}代替[]，这会导致您发布的错误。其次，HTML模板中使用的数组'heros'未声明。它应该在AppComponent中声明如下：

heroes = HEROES;

这样你就可以通过* ngFor。

在HTML中迭代它

您还可以在此网页上找到完整示例的链接： https://angular.io/tutorial/toh-pt2

祝你好运。

Answer 2

您将其定义为数组类型并指定为对象。观看括号{ }至[ ]

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' }
  ];

获取错误：Angular中的数组缺少属性长度？

2 个答案: