[英]Display an array with objects and icons
I have an array of objects 我有一系列对象
arr = [
{'name': value},
{'name': value},
{'name': value},
...............
]
Value is svg icon
. 值是
svg icon
。 I want to display this in the template with *ngFor 我想用* ngFor在模板中显示它
<div> arr.name </div>
<svg> arr.value </svg>
Are there ways to do this? 有办法吗?
Try this : 尝试这个 :
arr = [{
'name': 'exp1',
'value': 'exp1'
}, {
'name': 'exp2',
'value': 'exp2'
}]
and in HTML : 和在HTML中:
<ng-container *ngFor="let item of arr">
<div> {{ item.name }}</div>
<svg> {{ item.value }} </svg>
</ng-container>
assuming 'name' is just a placeholder and the key is actually a variable value, you could do something like: 假设“名称”只是一个占位符,而键实际上是一个变量值,则可以执行以下操作:
in controller, map it into something usable: 在控制器中,将其映射到可用的对象中:
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};
});
then in template do exactly what you have: 然后在模板中执行您所拥有的:
<ng-container *ngFor="let item of mapped">
<div>{{item.name}}</div>
<svg>{{item.value}}</svg>
</ng-container>
Create function to getKey() and getValue() in object in .ts 在.ts中的对象中创建函数getKey()和getValue()
getKey(object)
{
let keys= Object.keys(object);
return keys[0];
}
getValue(object)
{
let keys= Object.keys(object);
return object[keys[0]];
}
In HTML 在HTML中
<ng-container *ngFor="let item of arr | keyvalue">
<div>{{getKey(item.value)}}</div>
<svg>{{getValue(item.value)}}</svg>
</ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.