主页 / user-12105954

kibet's questions

Martin Hope
kibet
Asked: 2025-04-25 15:35:53 +0800 CST
  • 6

我尝试使用 rxResource 显示数据。但是，返回的数据始终未定义。然而，检查网络选项卡显示数据确实正在获取，只是我的组件出了点问题。这段代码有什么问题？因为我似乎找不到问题所在。

API 服务

import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { httpResource } from "@angular/common/http";

@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);
  }

组件文件：

import { Component, inject, signal } from '@angular/core';
import { ApiService } from '@services/api.service';
import { rxResource, toSignal } from '@angular/core/rxjs-interop';
import { distinctUntilChanged, map } from 'rxjs';

@Component({
  selector: 'app-blogs',
  templateUrl: './blogs.component.html',
  styleUrl: './blogs.component.scss'
})
export class BlogsComponent {

  apiService = inject(ApiService)
  query = signal('')

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

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

// Template
<p>blogs works!</p>

<input (input)="search($event)" placeholder="Search user..."/>
    
    <br />
    <ul>
      @let error = rxBlog.error();

      @if (error) {
        <p>{{ error }}</p>
      }

      @if (rxBlog.isLoading()) {
        <p>Loading Blogs...</p>
      }

      @for (blog of (rxBlog.value()).country) {
        {{blog.country_id}}
      }
      
    </ul>

Json数据如下：

{
  "count": 22997,
  "name": "steve",
  "country": [
    {
      "country_id": "KE",
      "probability": 0.0728971981962264
    },
  ]
}
angular