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

【问题标题】：How to display or split a single string one below another inside a <td>如何在 <td> 中显示或拆分单个字符串
【发布时间】：2020-03-16 09:38:13
【问题描述】：

我在类似于

的 td 中有数据

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

我想在哪里显示，

糖：5

洋葱：3

胡萝卜：9

面包：9

在表格的 td 内。

我正在尝试使用角度材料表来实现

我只达到了这么多，想要像上图那样实现Items column

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

上传

打字稿文件

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

【问题讨论】：

如果每一行都在不同的元素中，除非您可以以编程方式在每一行之间插入<br/>，否则您不能这样做。

标签： javascript html css angular angular-material

【解决方案1】：

我会选择 Map() 和 ngFor，它会为您提供如下内容：

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

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

（见here）

【讨论】：

【解决方案2】：

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

【讨论】：