HTML Angular Material中的拆分字符串

Question

我有datasource=details，它有两个参数nameOfFruits and type。对于nameOfFruits，我收到了一个类似"Apple,Banana,Orange,Kiwi,Mango" 的字符串。我正在尝试在下表中显示列表：

 <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>

我正在尝试将addTag 类分别应用于每个水果，但我无法将其拆分并应用于每个水果，而是应用于整个列表。

在与 dataSource 绑定之前，我尝试在 TS 文件中拆分列表，例如：

this.details.data = response.Items;
for (let i = 0; i <= this.details.data.length; i++){
this.splittedList[i] = this.details.data[i].nameOfFruits.split(',');
this.finalList.push(this.splittedList[i]);
this.details.data[i]['nameOfFruits'] = this.finalList[i];
}

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

Answer 1

问题是您没有这样的列定义列表：

<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>

我希望我能理解您的问题并希望这会有所帮助；） 此代码未经测试，请尝试自行查找错误。主要思想是所有列都必须在单独的模板中定义。