[Sugestão] Outra resolução para a mensagem de erro

Service utilizei a resolução da aula

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable, tap } from 'rxjs';
import { Item, LivrosResultado } from '../models/interfaces';

@Injectable({
  providedIn: 'root'
})
export class LivroService {
  private readonly API = 'https://www.googleapis.com/books/v1/volumes'

  constructor(private http: HttpClient) { }

  buscar(valorDigitado: string): Observable<Item[]> {
    const params = new HttpParams().append('q', valorDigitado);
    return this.http.get<LivrosResultado>(this.API, { params }).pipe(
      // tap(retornoApi => console.log('Fluxo do tap:', retornoApi)),
      map(resultado => resultado.items ?? []),
      // tap(resultado => console.log('Resultado após o map:', resultado))
    );
  }
}

A mudança vem no livro.component.ts:

livrosEncontrados$ = this.campoBusca.valueChanges.pipe(
    debounceTime(pausa),
    filter(valorDigitado => valorDigitado.length >= 3),
    distinctUntilChanged(),
    switchMap((valorDgitado) => this.service.buscar(valorDgitado)),
    tap((items) => {
      if (items === null || items === undefined || items.length === 0)
        this.mensagemErro = '0 resultados encontrados';

      else
        this.mensagemErro = '';
    }),
    map((items) => {return this.livrosResultadoParaLivros(items);}),
    catchError(() => {
      this.mensagemErro = 'Ops, ocorreu um erro. Recarregue a aplicação';
      return EMPTY;
    })
  )

Não fiz alteração em nada além do tap antes do map, fiz a verificação se o array de items ele é vazio, caso seja atribua a variável criada para exibir o erro o valor que eu quero, caso contrário retorna uma string vazia, assim quando eu digitar algum valor no input novamente a mensagem de erro some.