Html 如何在列表值中添加空格？

如下面的代码所示，我想在清单中的每个值后面添加空格。这些数据来自表视图

HTML文件中的

<ng-container matColumnDef="rType">
     <th mat-header-cell *matHeaderCellDef > Resource Type  </th>
     <td mat-cell *matCellDef="let element"> {{element.rType}} </td>
</ng-container>

bindTableCol() : void {
    if(DNHelper.loginUserData && DNHelper.loginUserData.resourcePreference1 && DNHelper.loginUserData.resourcePreference1.length > 0){
      this.displayedColumns = DNHelper.getColumnTable(DNHelper.loginUserData.resourcePreference1);
      this.displayedColumns.push('view_more');
      this.displayedColumns.push('action');
    } else {
      this.displayedColumns = ['divisonName', 'categoryName', 'rType', 'resourceStatus', 'view_more', 'action'];
    }
}

结果（这些是值）

预期结果

CRWT1, CRWT2IA, CRWT2, CRWT3, ENG1

没有生成的html快照

您可以尝试以下方法：

<ng-container matColumnDef="rType">
     <th mat-header-cell *matHeaderCellDef > Resource Type  </th>
     <td mat-cell *matCellDef="let element"> {{element.rType.split(",").join(", ")}} </td>
</ng-container>

资源类型
{{element.rType.split（“，”）.join（“，”}
<>代码> 。为了最小化应用程序上的负载，您也可以考虑创建管道。

就用法而言，它可以是这样的：
{{element.rType | join:'，'}}

变换函数如下所示：

@Pipe({
  name: 'join'
})
export class JoinPipe implements PipeTransform {
  transform(input:Array<any>, sep = ','): string {
    return input.join(sep);
  }
}

@管道({
姓名：“加入”
})
导出类JoinPipe实现PipeTransform{
转换（输入：数组，sep='，）：字符串{
返回input.join（sep）；
}
}

使用此代码将对您有所帮助


资源类型
{{element.rType.replaceAll（'，'，'，'}}
您可以使用类似于
{{'+element.rType}
谢谢您的建议，但不起作用。您可以通过屏幕截图共享生成的html吗？我共享管理单元代码，请检查。它抛出
错误类型错误：element\u r19.rType.split不是函数
它的抛出
错误类型错误：element\u r19.rType.replaceAll不是函数
错误
@Pipe({
  name: 'join'
})
export class JoinPipe implements PipeTransform {
  transform(input:Array<any>, sep = ','): string {
    return input.join(sep);
  }
}

<ng-container matColumnDef="rType">
 <th mat-header-cell *matHeaderCellDef > Resource Type  </th>
 <td mat-cell *matCellDef="let element"> {{element.rType.replaceAll(',',', '}} </td>
</ng-container>