Os dados não estão sendo exibidos no modelo, mas os dados são obtidos

Pontos iniciais:

Quando você deseja debounceentradas ou manipulações reativas adicionais usando rxjs, então rxResourceé a melhor opção.

Quando você quer apenas fazer uma chamada de API e ter reatividade presente, esta httpResourceé a melhor opção.

O que httpResourceestá por trás das chamadas HttpClienté que não há necessidade de manutenção.

A vantagem httpResourceé a grande redução de código clichê, usado para fazer chamadas de API simples.

Usando HttpResource:

Você tem um exemplo de busca muito básico, então rxResourcenão é a melhor opção. Em vez disso, escolha httpResource, onde precisamos apenas fornecer um urldentro de um retorno de chamada e ele buscará os dados de forma reativa quando os sinais de origem dentro do retorno de chamada mudarem.

rxBlog = httpResource<ApiData>(
  () => `https://api.nationalize.io/?name=${this.query()}`
);

Código completo:

import {
  Component,
  inject,
  Injectable,
  ResourceStatus,
  signal,
} from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  HttpClient,
  httpResource,
  provideHttpClient,
} from '@angular/common/http';
import { Observable } from 'rxjs';

export interface ApiDataCountry {
  country_id: string;
  probability: number;
}
export interface ApiData {
  count: number;
  name: string;
  country: Array<ApiDataCountry>;
}
@Injectable({
  providedIn: 'root',
})
export class ApiService {
  private readonly httpClient = inject(HttpClient);

  public GET<T>(path: string, options: any = {}) {
    return this.httpClient.get<T>(path, options) as Observable<T>;
  }
}

@Component({
  selector: 'app-root',
  template: `
    <p>blogs works!</p>
    <input (input)="search($event)" placeholder="Search user..."/>
    <br />
    <ul>
      @let error = rxBlog.error();
      @if (error) {
        <p>{{ error }}</p>
      } @else if (rxBlog.isLoading()) {
        <p>Loading Blogs...</p>
      } @else {
        @let countryList = (rxBlog.value())?.country || [];
        @for (blog of countryList; track blog) {
          <li>{{blog.country_id}}</li>
        }
      }
    </ul>
  `,
})
export class App {
  apiService = inject(ApiService);
  query = signal('');
  rs = ResourceStatus;
  rxBlog = httpResource<ApiData>(
    () => `https://api.nationalize.io/?name=${this.query()}`
  );

  search(event: Event) {
    const { value } = event.target as HTMLInputElement;
    this.query.set(value);
  }
}

bootstrapApplication(App, {
  providers: [provideHttpClient()],
});

Demonstração do Stackblitz

Usando RxResource:

O rxResourcenão acionará a API até que os sinais de origem mudem, portanto, não há necessidade de distinctUntilChanged. Ele também busca os valores uma vez durante a inicialização.

  rxBlog = rxResource({
    request: () => this.query(),
    loader: () => this.apiService.GET(`https://api.nationalize.io/?name=${this.query()}`)
  })

Abaixo está um exemplo prático para demonstrar o rxResource em ação:

import {
  Component,
  inject,
  Injectable,
  ResourceStatus,
  signal,
} from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface ApiDataCountry {
  country_id: string;
  probability: number;
}
export interface ApiData {
  count: number;
  name: string;
  country: Array<ApiDataCountry>;
}
@Injectable({
  providedIn: 'root',
})
export class ApiService {
  private readonly httpClient = inject(HttpClient);

  public GET<T>(path: string, options: any = {}) {
    return this.httpClient.get<T>(path, options) as Observable<T>;
  }
}

@Component({
  selector: 'app-root',
  template: `
    <p>blogs works!</p>
    <input (input)="search($event)" placeholder="Search user..."/>
    <br />
    <ul>
      @let error = rxBlog.error();
      @if (error) {
        <p>{{ error }}</p>
      } @else if (rxBlog.isLoading()) {
        <p>Loading Blogs...</p>
      } @else {
        @let countryList = (rxBlog.value())?.country || [];
        @for (blog of countryList; track blog) {
          <li>{{blog.country_id}}</li>
        }
      }
    </ul>
  `,
})
export class App {
  apiService = inject(ApiService);
  query = signal('');
  rs = ResourceStatus;
  rxBlog = rxResource({
    request: () => this.query(),
    loader: () =>
      this.apiService.GET<ApiData>(
        `https://api.nationalize.io/?name=${this.query()}`
      ),
  });

  search(event: Event) {
    const { value } = event.target as HTMLInputElement;
    this.query.set(value);
  }
}

bootstrapApplication(App, {
  providers: [provideHttpClient()],
});

Demonstração do Stackblitz

Pontos adicionais:

É sempre bom definir uma interface para seus dados buscados.

export interface ApiDataCountry {
  country_id: string;
  probability: number;
}
export interface ApiData {
  count: number;
  name: string;
  country: Array<ApiDataCountry>;
}

Existe a possibilidade de que a countrypropriedade recuperada seja undefined, então eu uso leto operador and ou ||para fornecer um valor padrão se for undefined.

@let countryList = (rxBlog.value())?.country || [];
@for (blog of countryList; track blog) {
  <li>{{blog.country_id}}</li>
}