我试图以角度显示一组数据。数据是键值形式。我正在使用* ngFor进行迭代。问题是所有记录中的值部分不统一。在某些记录中,它是一个字符串,在某些记录中它是一个数组。所以在这些情况下它会在我的页面中显示[Object object]。
如何通过* ngIf在值字段内迭代这个内部数组,这是我的问题。
代码的一部分
<div class="row" *ngFor='let item of model'>
<div class="col-md-4">{{item.key}}</div>
<div class="col-md-8 " data-toggle="collapse" >{{item.value}}</div>
</div>
在组件中有一个函数,它检查值并告诉它是字符串还是数组。
checkValue(val) {
return val instanceof Array;
}
<div class="row" *ngFor='let item of model'>
<div class="col-md-4">{{item.key}}</div>
<ng-container *ngIf="checkValue(item.value) else stringValue">
<span class="col-md-8 " *ngFor='let subItem of item.value' data-toggle="collapse" >{{subItem}}</span>
</ng-container>
</div>
<ng-template #stringValue>
<div class="col-md-8 " data-toggle="collapse" >{{item.value}}</div>
</ng-template?
这些方面的东西:
.
.
.
model = [
{
key: 'ContextNameSpaces',
value: [{ a: 1, b: 2 }, { a: 3, b: 4 }]
},
{
key: 'ContextNameSpaces',
value: 1
}
];
isObject(val) {
return typeof val === 'object';
}
.
.
.
<div *ngFor="let item of model">
{{item.key}}
<ng-container *ngIf="isObject(item.value); else elseTemplate">
<span *ngFor="let j of item.value">
{{j.a}}
</span>
</ng-container>
<ng-template #elseTemplate>
{{item.value}}
</ng-template>
</div>
你可以尝试这些:
对象:
object = [
{
"id": 1,
"test": "test1",
"name": ["abc", "pqr"]
},
{
"id": 2,
"test": "test2",
"name": ["abc2", "pqr2"]
},
{
"id": 3,
"test": "test3",
"name": ["abc3", "pqr3"]
},
{
"id": 4,
"test": "test4",
"name": ["abc4", "pqr4"]
}];
代码:
ngOnInit() {
for (let item of this.object) {
for (let i in item) {
if (typeof (item[i]) === 'object') {
item[i].forEach((e: any) => {
console.log("runseprate", e)
});
}
}
}
}