javascript - 我无法在角度前端迭代数组
问题描述
我在前端以角度创建了一个数组,该数组具有来自我在 mongoDB 中的数据库的学校中心。问题是当使用 ngFor 我尝试迭代中心数组时。userService从我的 api 获取用户。
“找不到类型为‘object’的不同支持对象‘[object Object]’。NgFor 仅支持绑定到 Iterables,例如数组。”
public centers: Center[];
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _userService: UserService
){
this.user = new User("","","","","","","","","","","");
this.title = 'Registrate'
}
getCenters(){
this._userService.getCenters().subscribe(
//Se guardan los centros en un array para poder acceder a ellos desde la plantilla
response => {
this.centers = response;
},
err => {
console.log(err);
}
)
}
ngOnInit(){
this.getCenters();
}
解决方案
除了 keyValue 管道(如果您不使用 Angular 6+),您可以通过以下方式获取对象键作为数组
public keys = Object.keys(this.user)
并在模板中遍历这些键并通过键匹配获取原始对象值:
<p *ngFor="let k of keys"> {{user[k]}} </p>
为了完整起见,您的问题是缺少 HTML 片段。我假设社区甚至不知道您希望迭代哪个对象user
推荐阅读
- python - 如何一次在多个csv文件中添加列值
- python - 查找方法不提取已经存在的 div 标签
- android - 使用矢量绘图时,setImageDrawable 和 setImageResource 有什么区别?
- r - 用于 aes 的熔化物体的 X 和 Y 名称
- python - 我正在尝试使用深度学习和使用音频数据集来构建说话人识别项目。但在训练代码中几乎没有错误
- bash - 用于移动具有不同扩展名的重复文件的 Bash 脚本?
- kubernetes - 带有 Kubectl 的 EKS 一直说未经授权
- sql - 如何激活oracle服务?
- javascript - 想通过我的应用程序自动发送邮件,但我希望正文有吸引力
- swift - 如何使我的自定义 ViewModifier 仅适用于 SwiftUI 中符合(可识别和视图)的内容/视图?