数据未显示在模板上，但已获取数据

初始点：

当您想要debounce使用输入或额外的反应操作时rxjs，这rxResource是最好的选择。

当您只想进行 API 调用并具有反应性时，这httpResource是最佳选择。

由于httpResource引擎盖下有呼叫HttpClient，因此不需要服务。

其优点httpResource是可以大量减少样板代码，用于进行简单的 API 调用。

使用HttpResource：

您有一个非常基本的获取示例，因此rxResource不是最合适的，而是选择httpResource，我们只需要在回调中提供一个url，当回调中的源信号发生变化时，它将被动地获取数据。

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

完整代码：

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()],
});

Stackblitz 演示

使用 RxResource：

直到源信号发生变化时才会rxResource触发 API，因此无需distinctUntilChanged。它还会在初始化期间获取一次值。

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

下面是一个演示 rxResource 实际作用的示例：

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()],
});

Stackblitz 演示

附加要点：

为获取的数据定义一个接口总是好的。

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

获取的属性有可能country是undefined，因此我使用let与或运算符||来提供默认值（如果是）undefined。

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