Get multiple nested data from web api in angular material table

Question

Hi i am new to angular i have doubt on print nested data within nested data from web api to angularmaterial table..

my data like :

    {
    "Code": "1",
    "Data": {
    "id": 1,
    "userId": 1,
    "orderDetails": [
        {
           
            "medicineId": 1,
             "medicine": {
                "medicineName": "Paracetomol"
            }
        },
        {
             
            "medicineId": 2,
             "medicine": {
                "medicineName": "vicsaction"
            }
        }
    ]
}

}

here i want to print medicineName names in loop...i want to print two rows depoends on orderdetails

this is my html:

       <ng-container matColumnDef="medicineName"> 
            <th mat-header-cell *matHeaderCellDef > Medicine </th>
            <td mat-cell *matCellDef="let row"> {{row.orderDetails.medicine.medicineName}} </td>
          </ng-container>

it shows error like "Provided data source did not match an array, Observable, or DataSource"

how to fix this error