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

Question

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" class="mat-elevation-z8">
  
        <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

Master json

details

mat-table view

Models.

import {MaterialDemandDetailsModel} from "./material-demand-details-model/material-demand-details-model";

export class MaterialDemandWithDetailModel {
  id: number | undefined;
  description: string | undefined;
  createdUserId: string | undefined;
  createdUserName: string | undefined;
  status: string | undefined;
  companyId: string | undefined;
  totalCount: number | undefined;

  materialDemandDetails: MaterialDemandDetailsModel[] | any; //MaterialDemandDetailsModel[] | undefined;
}


export class MaterialDemandDetailsModel {
  id: number | undefined;
  totalDemand: number | undefined;
  stockName: string | undefined;
  materialDemandId: number | undefined;
  productId: number | undefined;
  createdDate:Date | undefined;
  updatedDate: Date | undefined;
}

Answer 1

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" class="mat-elevation-z8">
  
        <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%2Fapp%2Ftable-basic-example.html