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

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>