[英]Angular NgFor Issue
I am trying to display the list of the object having id and name using NgFor directive but i am getting below error : 我正在尝试使用NgFor指令显示具有ID和名称的对象的列表,但出现以下错误:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. 错误:找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor only supports binding to Iterables such as Arrays.
NgFor仅支持绑定到Iterables,例如数组。
Below are the codes files for reference . 以下是代码文件供参考。
`heroes.component.ts: `heroes.component.ts:
This file has heroes object declared. 该文件已声明了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: heroes.component.html:
This is the file where I am using NgFor in 这是我在其中使用NgFor的文件
<ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul>
mock-heroes.ts: 模拟heroes.ts:
This files contains the constant object of the heroes that i want to be displayed on UI. 该文件包含我要在UI上显示的英雄的常量对象。
import {Hero} from './hero'; export const HEROES: Hero[] ={ {id:11 , name:'Mr. Nice'}, {id:12 , name:'Narco'}, {id:13 , name:'Bombasto'} };
Can you please help me here ? 你能在这里帮我吗?
ngFor doesn't support object try this below : ngFor不支持对象,请尝试以下操作:
export const HEROES: Hero[] =[
{id:11 , name:'Mr. Nice'},
{id:12 , name:'Narco'},
{id:13 , name:'Bombasto'}
];
As the error denotes 如错误所示
Cannot find a differ supporting object '[object Object]' of type 'object'
找不到类型为“对象”的其他支持对象“ [对象对象]”
Your Heroes should be an array instead of object. 您的英雄应该是数组而不是对象。 change it as,
改成
const HEROES: Hero[] =[
{id:11 , name:'Mr. Nice'},
{id:12 , name:'Narco'},
{id:13 , name:'Bombasto'}
];
you should define HEROES as an array, with [ ]
instead of { }
as the outer enclosing braces : 您应该将HEROES定义为一个数组,并使用
[ ]
而不是{ }
作为外部括号:
[
{ ... },
{ ... },
]
instead of 代替
{
{ ... },
{ ... },
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.