angular - displaying details in mat-table - problem creating multiple tables in multiple records-CodePudding

I have a code structure in angular html as follows. It creates more than one table when more than one record arrives, how can I prevent this?

  <div *ngFor="let item of materialsDetails" >
    <ng-container *ngFor="let subItem of item.materialDemandDetails">
      <table mat-table [dataSource]="materialsDetails" >
  
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id </th>
          <td mat-cell *matCellDef="let element"> {{subItem.id}}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </ng-container>
  </div>

I get the data, I transfer it to the table, but more than one "ID" field occurs as in the bottom picture, how can I prevent this?

I want to show data in material Demand Details in table. but too many columns occur

[
  {
    "description": "Ram demand.",
    "createdUserId": "12345",
    "createdUserName": "creater",
    "status": "idle",
    "companyId": 2,
    "materialDemandId": 0,
    "materialDemandDetails": [
      {
        "stockName": "Ram 12 gb products",
        "totalDemand": 2,
        "materialDemandId": 1,
        "productId": 2,
        "id": 1,
        "createdDate": "2022-02-08T14:29:11.1763481",
        "updatedDate": "2022-02-08T11:28:42.409",
        "totalCount": 0,
        "companyId": 0
      },
      {
        "stockName": "Ram 2 gb products",
        "totalDemand": 2,
        "materialDemandId": 1,
        "productId": 1,
        "id": 3,
        "createdDate": "2022-02-08T14:32:09.7305862",
        "updatedDate": "2022-02-08T11:28:42.409",
        "totalCount": 0,
        "companyId": 0
      }
    ],
    "id": 1,
    "createdDate": "2022-02-08T14:28:33.0658772",
    "updatedDate": "2022-02-08T11:27:46.939",
    "totalCount": 0
  }
]

A json data is coming as below

Finally, you need to add some CSS to modify the width of the columns and cells to show the data properly.

CodePudding user response：

Remove the second *ngFor and change data source to materialDemandDetails instead of materialsDetails. Change subItem.id also to element.id. You don't have to iterate through materialDemandDetails array, but give this array as data source for your table as:

<div *ngFor="let item of materialsDetails" >
      <table mat-table [dataSource]="item.materialDemandDetails" >
  
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id </th>
          <td mat-cell *matCellDef="let element"> {{element.id}}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
  </div>

stackblitz link: https://stackblitz.com/edit/material-table-responsive-zepz3z?file=src/app/table-basic-example.html screen shot