角度 - 如何在表格单元格中将数组显示为多行答案

【问题标题】：angular - how to display array as multiple lines in a table cell角度 - 如何在表格单元格中将数组显示为多行
【发布时间】：2020-05-28 22:37:04
【问题描述】：

对不起，我是 Angular 的新手，在自己制作一些应用程序的同时尝试学习一些基础知识。

我有以下在表格单元格中输出一个数组测试1，测试2，测试3

我的目标是让它显示为

测试1

测试2

测试3

getStatus(element.message) 返回一个由

构造的数组

array.push(match[0]) 在 for 循环中

    <ng-container matColumnDef="ticketStatus">
      <th mat-header-cell *matHeaderCellDef class="text-center w-6">
        Status
      </th>
      <td mat-cell *matCellDef="let element">{{ getStatus(element.message) }}</td>
    </ng-container>

【问题讨论】：

标签： angular

【解决方案1】：

我注意到您使用的是 Angular 材质。您可以做的是使用显示列上的 foreach 填充您的单元格？

<table cdk-table [dataSource]="dataSource">

  <ng-container *ngFor="let col of displayedColumns" cdkColumnDef="{{ col }}">
     <th cdk-header-cell *cdkHeaderCellDef>{{ col }}</th>
     <td cdk-cell *cdkCellDef="let row; let i = index"> {{ getFieldValue(i, col) }}   </td>
   </ng-container> 

   <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
   <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>

请注意：该示例是一个 CDK 表，但它几乎与 Angular Material Table 相似，因为它是从 CdkTable 派生的。

我创建了一个 Stackblitz。也许你能得到一些启发：

https://stackblitz.com/edit/angular-ivy-bes8zf

【讨论】：

感谢您的启发。我想我没有把我的问题说清楚。从你的例子中，我的问题是如果列“名称”中的值可以是一个数组，我怎样才能在同一个单元格中正确地显示为多行？
再次感谢您的见解。我使用 Status {{ status }}