Css HTML角材质中的拆分字符串

我有

datasource=details

，它有两个参数

nameofruits和type

。对于

nameofruits

我收到一个字符串，如

“苹果、香蕉、橘子、猕猴桃、芒果”

。我正在尝试在表格中显示列表，如下所示：

 <ng-container matColumnDef="nameOfFruits">
            <th mat-header-cell *matHeaderCellDef> Name of Fruit </th>
            <td mat-cell *matCellDef="let element; let i = index" class="addTag">{{element.nameOfFruits}}
            </td>
 </ng-container>

---

但我仍然无法在UI中看到拆分的列表。有没有一种方法可以使用自定义管道并直接实现它？

问题是您没有列定义列表，如下所示：

<mat-row *matRowDef="let row; columns: displayedColumns">

displayedColumns应该有一个您将在此处定义的所有列的列表

<ng-container *ngFor="let col of myColumns" matColumnDef="nameOfFruits{{col}}">

因此，最后，附加列的代码应该如下所示

<ng-container matColumnDef="{{col}}" *ngFor="let col of columnList">
        <th mat-header-cell *matHeaderCellDef> Fruit {{col}}</th>
        <td mat-cell *matCellDef class="addTag">whatever</td>
</ng-container>

水果{{col}
无论什么

我希望我理解你的问题，并希望这会有所帮助；）

---

这段代码还没有经过测试，所以试着自己找出bug。其主要思想是，所有列都必须在单独的模板中定义。

这个.details.data中到底包含什么？它是一个对象数组，基本上是

[{}，{}，{}]

大小是动态的。每个对象作为两个参数

nameofruits

和

type

我只是将

type

绑定到行的一列中，并希望在一列中显示所有

nameofruits

，但我正在应用一些css类来分离每个水果。否则它看起来像一个段落

水果{{nameofruits}}这里显示什么/

我的代码应该是这样的吗？另外，我将如何应用标记。我试过这个，它说：

找不到id为“nameofruits”的列

您还可以添加如何获得

cloumnList

？columnList是要显示的列的名称数组-将其放入组件的代码中。

<ng-container matColumnDef="{{col}}" *ngFor="let col of columnList">
        <th mat-header-cell *matHeaderCellDef> Fruit {{col}}</th>
        <td mat-cell *matCellDef class="addTag">whatever</td>
</ng-container>