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

问题描述：

我想通过一个数组，我不能做，因为它是给物业长度缺少一个数组的迭代，以显示英雄的名单（见截图）获取错误：在Angular中缺少数组的属性长度？

我的代码：在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

我们试图给'HEROES'数组指定一个对象:)应该是'HEROES：Hero [] = [....]' – Alex

答

您将其定义为数组类型和对象分配。注意你的括号{ }到[ ]

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

答

我想你是以下的角英雄教程，对不对？所以你可能想要把在线例子作为参考。首先，英雄的阵列应当被分配给数组像这样：

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'没有声明。所以

heroes = HEROES;

，您可以通过* ngFor重复它在HTML：应该在AppComponent声明如下。

而且你还可以找到完整的例子在这个网页中的链接： https://angular.io/tutorial/toh-pt2

好运。

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

相关推荐