Tengo una lista de archivos cargados en los que los nombres de archivo se ven así:

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

Necesito el nombre solo después del símbolo |.

No quiero cambiar el nombre del archivo. Solo quiero mostrar el nombre del archivo sin el hash.

Parece que no puedo entender cómo lograr esto

Aquí está el código de plantilla que representa la lista de archivos.

<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>
1
Rekha 27 dic. 2019 a las 14:05

2 respuestas

La mejor respuesta

Suena como un caso de uso perfecto para una tubería personalizada.

Puede crear una tubería personalizada como esta:

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

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

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

}

Entonces podría usarlo así:

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

Aquí hay un demostración de código de muestra en funcionamiento para su ref.

2
SiddAjmera 27 dic. 2019 a las 11:14

Intente buscar en Tubos angulares. Las tuberías se utilizan en la página HTML y no requieren nada en el script. Permiten la modificación del texto.

Luego, puede crear una tubería personalizada que elimine cualquier cosa antes de una tubería, utilizando TS normal.

str = str.substring(str.indexOf("|") + 1);

1
SoFolichon 27 dic. 2019 a las 11:15