时间戳

首页 > 解决方案 > 如何根据角度的html页面中的特殊字符过滤文件名？

angular - 如何根据角度的html页面中的特殊字符过滤文件名？

问题描述

我有一个上传文件的列表，其中文件名如下所示 -

fc00a501-2536-4599-b180-ad661491e8f9|test.pdf

我只需要|符号后面的名称。

我不想更改文件的名称。我只想显示没有哈希的文件名。

我似乎无法弄清楚如何实现这一目标

这是呈现文件列表的模板代码。

<mat-list role="list">
  <mat-list-item role="listitem" *ngFor="let item of uploadedFiles">
    <div class="list-files">
      <span>{{item}}</span>
      <div class="btn-custom" (click)="delete(item)"> Delete</div>
    </div>
  </mat-list-item>
</mat-list>

标签： angular

解决方案

听起来像是自定义管道的完美用例。

您可以像这样创建自定义管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'nameWithoutHash'
})
export class NameWithoutHashPipe implements PipeTransform {

  transform(fullName: any, args?: any): any {
    return fullName.split('|')[1];
  }

}

然后你可以像这样使用它：

<mat-list role="list">
  <mat-list-item role="listitem" *ngFor="let item of uploadedFiles">
    <div class="list-files">
      <span>{{item | nameWithoutHash}}</span>
      <div class="btn-custom" (click)="delete(item)"> Delete</div>
    </div>
  </mat-list-item>
</mat-list>

这是您的参考的工作示例代码演示。

推荐阅读