[英]Problem with the output of the Nested JSON in Mat-table
我有一個嵌套的 JSON,我想將它輸出到 Mat-Table ......你們能幫我解決這個問題嗎?
我可以輸出json susa,我如何輸出mandantKagAccountEntity?
我的代碼:
// Nested JSON
{
"success": true,
"susa": [
{
"accountlinevaluesId": 1,
"accountlineId": 1,
"mandantKagId": 660,
"mandantAccountsId": 1,
"period": "7",
"accountNumber": 27,
"name": "EDV-Hardware/Software",
"amount": 55.16859,
"mandantKagAccountEntity": {
"mandantKagId": 660,
"mandantId": 1,
"kagNumber": 2000,
"kagText": "A. I. 1. EDV-Software"
}
},
] }
// test.component.ts
private loadData() {
const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
this.balanceListService.getDataForAllMonth(yearString).subscribe(
(resp: any) => {
const data = resp.success ? resp.susa : null;
if (null !== data && data) {
.... }
}
}
這取決於您想要傳遞給 mat-table 的確切內容。 如果它是嵌套屬性mandantKagAccountEntity
的數組,那么這應該可以解決問題:
const data = resp.success ? resp.susa.map((item) => item.mandantKagAccountEntity) : null;
如果您只想第一次出現mandantKagAccountEntity
,那么您不必遍歷整個嵌套對象:
const data = resp.success ? resp.susa[0]?.mandantKagAccountEntity : null;
// 編輯:OP 有一個誤導性的問題。 他實際上想顯示整個數據,包括嵌套對象。 答案如下:
displayedColumns
由 mat-table 用於定義要顯示的列。 您可以根據自己的喜好編輯名稱。
displayedColumns: string[] = [
'accountlinevaluesId',
'accountlineId',
'mandantKagId',
'mandantAccountsId',
'period',
'accountNumber',
'name',
'amount',
'mandantKagAccountEntity-mandantKagId',
'mandantKagAccountEntity-mandantId',
'mandantKagAccountEntity-kagNumber',
'mandantKagAccountEntity-kagText',
];
每列都需要在mat-table
中定義如何顯示屬性的容器:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<ng-container matColumnDef="accountlinevaluesId">
<th mat-header-cell *matHeaderCellDef> accountlinevaluesId</th>
<td mat-cell *matCellDef="let element"> {{element.accountlinevaluesId}}</td>
</ng-container>
<ng-container matColumnDef="accountlineId">
<th mat-header-cell *matHeaderCellDef> accountlineId</th>
<td mat-cell *matCellDef="let element"> {{element.accountlineId}}</td>
</ng-container>
<ng-container matColumnDef="mandantKagId">
<th mat-header-cell *matHeaderCellDef> mandantKagId</th>
<td mat-cell *matCellDef="let element"> {{element.mandantKagId}}</td>
</ng-container>
<ng-container matColumnDef="mandantAccountsId">
<th mat-header-cell *matHeaderCellDef> mandantAccountsId</th>
<td mat-cell *matCellDef="let element"> {{element.mandantAccountsId}}</td>
</ng-container>
<ng-container matColumnDef="period">
<th mat-header-cell *matHeaderCellDef> period</th>
<td mat-cell *matCellDef="let element"> {{element.period}}</td>
</ng-container>
<ng-container matColumnDef="accountNumber">
<th mat-header-cell *matHeaderCellDef> accountNumber</th>
<td mat-cell *matCellDef="let element"> {{element.accountNumber}}</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> name</th>
<td mat-cell *matCellDef="let element"> {{element.name}}</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> amount</th>
<td mat-cell *matCellDef="let element"> {{element.amount}}</td>
</ng-container>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> position</th>
<td mat-cell *matCellDef="let element"> {{element.position}}</td>
</ng-container>
<ng-container matColumnDef="mandantKagAccountEntity-mandantKagId">
<th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-mandantKagId</th>
<td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.mandantKagId}}</td>
</ng-container>
<ng-container matColumnDef="mandantKagAccountEntity-mandantId">
<th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-mandantId</th>
<td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.mandantId}}</td>
</ng-container>
<ng-container matColumnDef="mandantKagAccountEntity-kagNumber">
<th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-kagNumber</th>
<td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.kagNumber}}</td>
</ng-container>
<ng-container matColumnDef="mandantKagAccountEntity-kagText">
<th mat-header-cell *matHeaderCellDef> mandantKagAccountEntity-kagText</th>
<td mat-cell *matCellDef="let element"> {{element.mandantKagAccountEntity.kagText}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
考慮到您確實希望顯示所有數據,因此不需要進一步映射所需的響應,除了
this.dataSource = resp.success ? resp.susa : null;
我已經解決了這個問題。 再次供您理解:) 代碼輸出整個 JSON 對象(包括嵌套)。 希望我可以幫助那些與我遇到完全相同問題的人。
// Fill the table with data
private loadData() {
this.balanceListService.getDataForAllMonth(yearString).subscribe(
(resp: any) => {
let data = resp.susa;
if (null !== data && data) {
data = data.map((item) => {
const kag = item.mandantKagAccountEntity;
delete item.mandantKagAccountEntity;
return { ...item, ...kag }; // merge two objects into one
});
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.