在 mat-table 中将字符串数组显示为多行文本

Question

我有一个 table，其中每个单元格内容都由一个包含不同数量字符串元素的数组填充。我希望能够在同一 table 单元格内的新行上显示每个字符串元素。

E.G 这里的每个数组都将包含在 table

的单个单元格中

myArray = ["hello", "world", "my", "name", "is", "jim"]
myArray2 = ["this", "cell", "content"]

所以 table 应该是这样的

|    | hello   |
|    | world   |
|row1| my      |
|    | name    |
|    | is      |
|    | jim     |
----------------
|    | this    |
|row2| cell    |
|    | content |

我试过使用 array.join('\r\n') 但 table 只是转义了这些字符并仅在单元格文本中显示它们。

有什么建议吗？

编辑： HTML 收录供参考

<div class="table-container">
  <table mat-table class="mat-elevation-z8" id="myTable" [dataSource]="myData">
    <ng-container matColumnDef="column1">
      <th mat-header-cell *matHeaderCellDef>Column1</th>
      <td mat-cell *matCellDef="let element" [style.color]="element.fontColour" [style.background-color]="element.cellColour">
        {{ element.shortName }}
      </td>
    </ng-container>
    <ng-container matColumnDef="column2">
      <th mat-header-cell *matHeaderCellDef>column2</th>
      <td class="column2-cell" mat-cell *matCellDef="let element">
        {{ myArraysAsMultiline }} <!-- <--- THIS IS THE DATA I WANT AS A MULTILINE -->
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>

Answer 1

我找到了解决问题的新方法，数组中的字符串使用 myArray.join('\r\n') 连接，在 css 中，white-space 字段设置为 pre-line.

在 mat-table 中将字符串数组显示为多行文本

Show array of strings as multiline text in mat-table

angular

angular-material-table