Início / user-11250470

Nhut Truong's questions

Martin Hope
Nhut Truong
Asked: 2025-04-03 09:55:42 +0800 CST
  • 5

Estou trabalhando em um aplicativo Angular onde busco dados de uma API e os exibo usando meu pipe de estado personalizado e pipe assíncrono. Há um botão para atualizar a chamada da API. No entanto, se ocorrer um erro, o observable para de emitir valores e não consigo mais atualizá-lo.

estado.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { Observable, catchError, map, of, startWith } from 'rxjs';

type ObsState<T> = Observable<ObsStateAsync<T>>;

export type ObsStateAsync<T> = { loading: boolean; result?: T; error?: any };
@Pipe({
  name: 'state',
})
export class StatePipe implements PipeTransform {
  transform<T>(val: Observable<T>): ObsState<T> {
    return val.pipe(
      map((value: any) => ({ loading: false, result: value })),
      startWith({ loading: true }),
      catchError((error) => of({ loading: false, error }))
    );
  }
}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onRefresh()">Refresh</button>
    @let breedState = breeds$ | state | async;

    @if(breedState?.loading){
      Fetching ...
    }

    @if(breedState?.error){
      Error
    }

    @if(breedState?.result){
      @for(breed of breedState?.result;track $index){
        <div> 
          {{ breed.attributes.name }}
        </div>
      }
    }
  `,
  imports: [StatePipe, AsyncPipe],
})
export class App {
  private readonly httpClient = inject(HttpClient);

  refresh = new BehaviorSubject<void>(undefined);

  getBreed$ = this.httpClient
    .get('https://dogapi.dog/api/v2/breeds') // Modify API endpoint to create an error
    .pipe(map((res: any) => res.data));

  breeds$ = this.refresh.asObservable().pipe(switchMap(() => this.getBreed$));

  onRefresh(): void {
    this.refresh.next();
  }
}

E eu não quero fazer catchError(()=>of([]))isso porque o erro precisa ser exibido na interface do usuário.

Stackblitz para o meu problema

angular