Angular NgFor 问题

Question

我正在尝试使用 NgFor 指令显示具有 id 和名称的对象列表，但出现以下错误:

错误:找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定(bind)到 Iterables，例如数组。

下面是代码文件供引用。

`heroes.component.ts:

这个文件声明了 heroes 对象。

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

  import { Hero } from '../hero';

  import { HEROES } from '../mock-heroes';
  @Component({
    selector: 'app-heroes',
    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']
  })

  export class HeroesComponent implements OnInit {   
    heroes = HEROES;
  }

heroes.component.html:

这是我在

标签中使用 NgFor 的文件。

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

模拟英雄.ts:

这个文件包含我想在 UI 上显示的英雄的常量对象。

  import {Hero} from './hero';    
  export const HEROES: Hero[] ={        
    {id:11 , name:'Mr. Nice'},
    {id:12 , name:'Narco'},
    {id:13 , name:'Bombasto'}
  };

你能帮帮我吗？

Answer 1

如错误所示

Cannot find a differ supporting object '[object Object]' of type 'object'

你的 Heroes 应该是一个数组而不是对象。将其更改为，

const HEROES: Hero[] =[
     {id:11 , name:'Mr. Nice'},
     {id:12 , name:'Narco'},
     {id:13 , name:'Bombasto'}
];

STACKBLITZ DEMO