问题描述: 当使用Angular 7中的NgFor指令尝试绑定到一个不是数组或可迭代对象的对象时,会出现错误消息“无法找到支持类型为 'object' 的对象 '[object Object]'。NgFor 只支持绑定到数组等可迭代对象。”
解决方法: 该错误是因为NgFor指令只能用于绑定到数组或可迭代对象。如果要在NgFor中使用一个对象,需要将其转换为数组或可迭代对象。
以下是一些解决此问题的常见方法:
在组件中:
myObject = { key1: 'value1', key2: 'value2', key3: 'value3' };
在模板中:
{{item.key}}: {{item.value}}
这将创建一个包含对象键值对的数组,并使用NgFor循环遍历该数组。
在组件中:
myObject = { prop1: 'value1', prop2: 'value2', prop3: 'value3' };
myArray = Object.values(this.myObject);
在模板中:
{{item}}
这将将对象的属性值转换为数组并使用NgFor循环遍历该数组。
在组件中:
myObject = { prop1: 'value1', prop2: 'value2', prop3: 'value3' };
在管道中:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'objectToArray' })
export class ObjectToArrayPipe implements PipeTransform {
transform(value: any): any[] {
return Object.values(value);
}
}
在模板中:
{{item}}
这将使用自定义管道将对象转换为数组,并使用NgFor循环遍历该数组。
通过使用上述方法之一,您应该能够解决“无法找到支持类型为 'object' 的对象 '[object Object]' 的区别。NgFor 只支持绑定到数组等可迭代对象。”的错误,并在NgFor中正确绑定对象。