我有datasource=details，它有两个参数nameoffruits和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中看到拆分的列表。有没有一种方法可以使用自定义管道并直接实现它？