遍历Angular 8中的对象键[重复]

Posted

技术标签:

【中文标题】遍历Angular 8中的对象键[重复]【英文标题】:Iterate through an object key in Angular 8 [duplicate] 【发布时间】:2020-06-10 09:55:53 【问题描述】:

我有这个对象:

protected products:  
 [key: string]: 
  color: string,
  brand: string,
 ;
 = ;

products =  
 scan12345: color: "Orange", brand: "X",
 scan13813: color: "Pink", brand: "X",

如何在我的组件 Tempate 中迭代这个项目?我试过了:

<ion-item *ngFor="let pro of products">
    pro.color 
</ion-item>

【问题讨论】:

使用*ngFor运行循环你应该有数组,你不能在对象上运行循环。 这能回答你的问题吗? access key and value of object using *ngFor @piyushjain 你可以使用keyvalue 管道。 【参考方案1】:

您可以使用 KeyValuePipe:

<ion-item *ngFor="let pro of products | keyvalue">
    pro.value.color 
</ion-item>

文档:https://angular.io/api/common/KeyValuePipe

【讨论】:

以上是关于遍历Angular 8中的对象键[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何遍历Angular 2中的对象属性

如何使用打字稿(Angular2)循环遍历JSON对象[重复]

遍历一个对象并找到键[重复]

如何解决 NullInjectorError: No provider for HttpClient! Ionic 4(Angular 8)中的问题

Angular ng-repeat vs data-ng-repeat [重复]

Angular 8 使用正确的数据显示 HTTP 响应。 ([对象对象])[重复]