Desafio: refatorando

export class ListaLivrosComponent {
  campoBusca = new FormControl();
  query = '';
  mensagemErro = '';
  livrosResultado: LivrosResultado;
  // declarado uma propriedade que armazena a quantidade de livros
  totalDeLivros: number;

  constructor(private service: LivroService) {}


  livrosEncontrados$ = this.campoBusca.valueChanges
  .pipe(
    debounceTime(PAUSA),
    filter((valorDigitado) => valorDigitado.length >= 3 && this.query != valorDigitado),
    distinctUntilChanged(),
    tap((retorno) => console.log('Inicio do fluxo', retorno)),
    switchMap((valorDigitado) => {
      this.query = valorDigitado;
      return this.service.buscar(valorDigitado);
    }),
    map(resultado => {
    // o total de itens é chamado e armazenado em totalDeLivros
      this.totalDeLivros = resultado.totalItems;
      return resultado.items ?? [];
    }),
    map((itens) => itens ? this.livrosResultadoParaLivros(itens) : null),
    catchError((erro) => {
      console.log(erro);
      return throwError(() => new Error('Ocorreu um erro'));
    })
  );

  livrosResultadoParaLivros(itens: Item[]): LivroVolumeInfo[] {
    return itens.map((item) => new LivroVolumeInfo(item));
  }
}

Em HTML é foi chamado a propriedade

<div class="resultados" *ngIf="totalDeLivros">
    Total de livros:  {{ totalDeLivros }}
  </div>