2 回答

TA貢獻1852條經驗 獲得超7個贊
您可以通過keyvalue pipe訪問詳細信息對象來迭代對象鍵/值作為內部 for 循環(huán) 。
網址:
<table>
<tr>
<th>Firstname</th>
<th>lastname</th>
<th>email_address</th>
<th>phone_number</th>
</tr>
<tr *ngFor="let listItem of yourList" >
<td *ngFor="let innerItem of listItem.details | keyvalue">
{{innerItem.value}
</td>
</tr>
</table>
填充列表
yourList = [{
"id": 9,
"event_id": 13,
"details": {
"firstname": "Ralph",
"lastname": "Marvin",
"email_address": "ralphmarvin@email.com",
"phone_number": "0987654321"
}
}, {
"id": 10,
"event_id": 13,
"details": {
"firstname": "John",
"lastname": "X Doe",
"email_address": "john_x_doe120@xmail.com",
"phone_number": "0009876543"
}
}, {
"id": 11,
"event_id": 13,
"details": {
"firstname": "Wari",
"lastname": "Gumah",
"email_address": "gumahwarihanna@eeee.com",
"phone_number": "120029182765"
}
}]

TA貢獻1835條經驗 獲得超7個贊
您可以在組件上實現(xiàn)一些邏輯來獲取一組字段。它看起來像這樣:(我假設項目作為 @Input() 出現(xiàn)在您的組件中,但它可能是另一個來源)
@Input() items: Item[];
fields: Set<string>;
ngOnChanges(changes) {
if(!changes.items || !this.items) return;
this.fields= new Set(this.items.flatMap(item => Object.keys(item.details)))
}
然后在模板中
<tr *ngFor="let item of items">
<td *ngFor="let field of fields">{{item.details[field]}}</td>
</tr>
添加回答
舉報