Mat-table中嵌套JSON的输出问题

Question

我有一个嵌套的 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) {
         .... }
}
}

Answer 1

这取决于您想要传递给 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;

Answer 2

我已经解决了这个问题。 再次供您理解:) 代码输出整个 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
              });
}
});
}