将 API 中的某些数据添加到 Angular Material Table 扩展部分

Question

我有以下来自 API 调用的响应数据集。我正在尝试从数据集中添加一个名为 contributorProfiles 的对象作为我在 material table.

中的扩展数据

[
  {
    "title": "bob",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "asdas",
    "locationId": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
    "startDate": "2020-07-08T00:00:00.000+0000",
    "endDate": "2020-07-10T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 22,
    "accreditationRequired": false,
    "accreditationReason": null,
    "subjects": "test",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "b6b99931-c6a3-476a-8c3a-9e2535823c13",
    "status": "Created",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "9614632c-d64d-4bf3-bb8f-5c38919f221c",
      "country": "Bhutan",
      "city": "Lhuentse"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": []
  },
  {
    "title": "tester kalpesh",
    "codes": [
      "Basketball"
    ],
    "description": null,
    "brief": "123",
    "locationId": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
    "startDate": "2020-06-24T00:00:00.000+0000",
    "endDate": "2020-07-03T23:00:00.000+0000",
    "submissionDueDate": "2020-08-26T23:59:59.000+0000",
    "workAcceptanceDate": "2020-08-26T23:59:59.000+0000",
    "deviceType": "Photography",
    "photography": {
      "minimumDpi": 300,
      "shortestSideLength": 2800
    },
    "videography": null,
    "fees": 55,
    "accreditationRequired": false,
    "accreditationReason": "none",
    "subjects": "55",
    "editors": null,
    "additionalEditorInformation": null,
    "imageId": null,
    "id": "3fdf9972-9b21-4a6e-b650-4141f5c6809e",
    "status": "Assigned",
    "createdBy": {
      "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
      "email": "bhavic@a.com",
      "firstname": "Bhavic",
      "surname": "Naran",
      "cell": null,
      "status": "ACTIVE",
      "requestedOn": null
    },
    "location": {
      "id": "aec466d9-9fb6-4718-9b1f-5fad429f7145",
      "country": "South Africa",
      "city": "Johannesburg"
    },
    "editorProfiles": [
      {
        "id": "7dfebb6b-dc83-4d5b-a010-2c5807b0e979",
        "email": "bhavic@a.com",
        "firstname": "Bhavic",
        "surname": "Naran",
        "cell": null,
        "status": "ACTIVE",
        "requestedOn": null
      }
    ],
    "contributorProfiles": [
      {
        "id": "95ac8466-8d98-47ab-95f8-24eb7b7cc27b",
        "email": "kalpesh@mithal.co.za",
        "firstname": "Kalpesh",
        "surname": "Mithal",
        "cell": "0884441122",
        "appliedStatus": "Created"
      }
    ]
  }
]

我已经为我的代码制作了一个 stackblitz 示例

https://stackblitz.com/edit/angular-hvcf5z

代码 HTML

    <table mat-table
           [dataSource]="dataSource" multiTemplateDataRows
           class="mat-elevation-z8">
      <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
      </ng-container>
    
      <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
      <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
          <div class="example-element-detail"
               [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
    
          </div>
        </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
          class="example-element-row"
          [class.example-expanded-row]="expandedElement === element"
          (click)="expandedElement = expandedElement === element ? null : element">
      </tr>
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
    </table>

TS

columnsToDisplay = ['title','city','startDate','deviceType','status','cancel'];
expandedElement: ['contributorProfiles'] | null;

因此，当我单击一行并展开时，我想显示该特定行的 contributorProfiles。我有什么想法可以解决这个问题吗？

Answer 1

这是适用于您的数据的 Stackblitz。

有点难弄清楚你的问题是什么，但我认为你从演示中得到了解决方案的想法。

另一个很好的例子可以在 Angular table docs and the depending Stackblitz for Table with expandable rows.

中找到

将 API 中的某些数据添加到 Angular Material Table 扩展部分

Add certain data from API into Angular Material Table expanded section

angular

angular-material

angular-material-table