如何在<td>内显示或拆分单个字符串

Question

我的数据中的数据类似于

  

糖：5；洋葱：3；胡萝卜：9；面包：9；

我想显示的位置

糖：5

洋葱：3

胡萝卜：9

面包：9

在表中的td中。

我试图使用有角度的材料表来实现

我只达到了这么多，想要实现如上图所示的 Items列

代码： 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>

上传

typescriptfile

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);
}
}

Answer 1

我会选择一个 Map（）和 ngFor ，这会给你一些类似的东西：

Add KeyValue To JsonFile and JsonObject
    [Arguments]  ${key}  ${value}  ${config_file}=None  ${json_arg}=None  ${address}=$
    ${json_obj} =  Run Keyword If  '${config_file}' != 'None'    Load JSON From File  ${config_file}
    ${object_to_add}=    Create Dictionary  ${key}=${value}
    ${json_obj}=    Add Object To Json  ${json_obj}  ${address}  ${object_to_add}
    Return From Keyword If    ${json_obj} is not ${None}    ${json_obj}

    ${json_obj}=  Run Keyword    Create Dictionary
    ${json_obj}=    Add Object To Json  ${json_arg}  ${address}  ${object_to_add}
    Log    ${json_obj}
    [return]  ${json_obj}

https://stackblitz.com/edit/angular-map-keyvalue

（看到here）

Answer 2

您可以将项目包装在p标记中。这也将在下一行中打破它。