使用动态对象数据在角度模板中显示对象数据

Posted 2023-03-13

【中文标题】使用动态对象数据在角度模板中显示对象数据

【英文标题】：Display object data in angular template using dynamic object data

【发布时间】：2020-09-25 03:29:39

【问题描述】：

我想以角度显示对象值到模板。但我的对象是动态的，所以我不知道它的键。我也尝试过管道键值，但这对我不起作用。 我尝试了一种可能的解决方案，但无法完成它。我也将键值作为数组和对象获取，但无法在 ng 模板中解析 这是我尝试过的-

data=[
'a':12,'b':34,'d':32,'w':3
'a':2,'b':4,'d':3,'w':23
'a':24,'b':24,'d':13,'w':63
]
key_name=['a','b','d','w']

在 html 文件中我尝试使用 *ngFor

<ion-row class="data-table data-table-row" *ngFor="let data of tableData">
<ion-col> data</ion-col>
</ion-row>

*****我正在使用离子**** 但数据给了[object][object] 当我用它写键名时，数据正在显示

data.a

谢谢

【问题讨论】：

你确定 tableData 是一个对象数组吗？如果它给你 [object][object] 看起来你有二维数组，简单的对象应该给你 [object Object] 我希望你在哪里声明你打算写的数组 tableData= [...]

【参考方案1】：

您可能必须使用两个 *ngFor 循环。试试下面的

tableData = [
  'a':12,'b':34,'d':32,'w':3,
  'a':2,'b':4,'d':3,'w':23,
  'a':24,'b':24,'d':13,'w':63
]

<ng-container *ngFor="let data of tableData">    <!-- iterate the `tableData` array -->
  <ng-container *ngFor="let item of data | keyvalue">    <!-- iterate the object in element of the array -->
     item.key  :  item.value 
  </ng-container>
</ng-container>

或者如果你不想迭代对象的每个属性，你可以使用json管道

<ng-container *ngFor="let data of tableData">    <!-- iterate the `tableData` array -->
   data | json 
</ng-container>

或者如果您仍然希望使用key_name 数组来访问对象的属性，您可以尝试以下方法

<ng-container *ngFor="let data of tableData">    <!-- iterate the `tableData` array -->
  <ng-container *ngFor="let key of key_name">    <!-- iterate the `key_name` array -->
     key  :  data[key] 
  </ng-container>
</ng-container>

【讨论】：

我尝试了第一个，它给了我结果，但不是按照原始对象接收的顺序。它正在洗牌

那是因为keyvalue 管道默认按key 对项目进行排序。您有 2 个选项。使用答案的第 3 个变体，在其中提供外部键数组来访问属性，或者在使用keyvalue 管道时查看here 来控制排序顺序。