Question

我有一个对象数组

 arr = [
{'name': value},
{'name': value},
{'name': value},
...............
]

值是svg icon。我想用* ngFor

在模板中显示它

<div> arr.name </div>
<svg> arr.value </svg>

有没有办法做到这一点？

Answer 1

尝试一下：

arr = [{
    'name': 'exp1',
    'value': 'exp1'
}, {
    'name': 'exp2',
    'value': 'exp2'
}]

和HTML：

<ng-container *ngFor="let item of arr">
   <div> {{ item.name }}</div>
   <svg> {{ item.value }} </svg>
</ng-container>

Answer 2

假设“名称”只是一个占位符，而键实际上是一个变量值，则可以执行以下操作：

在控制器中，将其映射为可用的内容：

 arr = [
{'name': value},
{'name': value},
{'name': value},
...............
]
mapped = this.arr.map(i => {
  let name = Object.keys(i)[0];
  let value = i[name];
  return {name, value};
});

然后模板中的内容将完全按照您的意愿进行

<ng-container *ngFor="let item of mapped">
  <div>{{item.name}}</div>
  <svg>{{item.value}}</svg>
</ng-container>

Answer 3

在.ts中的对象中创建函数getKey（）和getValue（）

getKey(object)
{
  let keys= Object.keys(object);
  return keys[0];

}
getValue(object)
{
  let keys= Object.keys(object);
  return object[keys[0]];
}

在HTML

中

<ng-container *ngFor="let item of arr | keyvalue">
  <div>{{getKey(item.value)}}</div>
  <svg>{{getValue(item.value)}}</svg>
</ng-container>

显示包含对象和图标的数组

3 个答案: