Jak wyświetlić lub podzielić pojedynczy łańcuch jeden poniżej wewnątrz <td>

Mam dane w td podobne do

Cukier: 5; Cebula: 3; Marchew: 9; Chleb: 9;

Gdzie chcę się wyświetlać jak

Cukier: 5

Cebula: 3

Marchewka: 9

Chleb: 9

Wewnątrz td w tabeli.

Próbuję wdrożyć za pomocą kątowego stołu materiałowego

Osiągnąłem tylko tyle, chcę osiągnąć jak na powyższym obrazku dla kolumny Elementy

Kod: plik html

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

<ng-container matColumnDef="orderId">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> orderId </th>
    <td mat-cell *matCellDef="let element"> {{element.orderId}} </td>
</ng-container>

<ng-container matColumnDef="customerId">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> customerId </th>
    <td mat-cell *matCellDef="let element"> {{element.customerId}} </td>
</ng-container>

<ng-container matColumnDef="deliveryPincode">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> deliveryPincode </th>
    <td mat-cell *matCellDef="let element"> {{element.deliveryPincode}} </td>
</ng-container>

<ng-container matColumnDef="orderDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> orderDate </th>
    <td mat-cell *matCellDef="let element"> {{element.orderDate}} </td>
</ng-container>

<ng-container matColumnDef="items">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> items </th>
    <td mat-cell *matCellDef="let element"> {{element.items}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

Przekazać plik

Plik maszynopisu

import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'antstack-problem';
  arrayBuffer:any;
  file:File;


  displayedColumns: string[] = ['orderId', 'customerId', 'deliveryPincode','orderDate', 'items' ];
  dataSource = new MatTableDataSource();

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }

  incomingfile(event) {

    this.file= event.target.files[0]; 

  }

  Upload() {
    let fileReader = new FileReader();
      fileReader.onload = (e) => {
          this.arrayBuffer = fileReader.result;
          var data = new Uint8Array(this.arrayBuffer);
          var arr = new Array();
          for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
          var bstr = arr.join("");
          var workbook = XLSX.read(bstr, {type:"binary"});
          var first_sheet_name = workbook.SheetNames[0];
          var worksheet = workbook.Sheets[first_sheet_name];

          this.dataSource = new MatTableDataSource(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
          this.dataSource.sort = this.sort;
          console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
      }
      fileReader.readAsArrayBuffer(this.file);
}
}