Angular中rxResource获取数据后模板无法显示问题排查

核心问题分析 #

1. rxResource的request参数使用错误：你将request写成了返回信号值的函数() => this.query()，但rxResource要求request是一个Signal/Observable，用于触发加载逻辑的依赖监听。
2. loader未正确接收请求参数：当前loader直接调用this.query()，可能导致请求使用旧的query值，未利用rxResource的参数传递机制。
3. 模板未处理value初始为undefined的情况：组件初始化时rxBlog.value()是undefined，直接访问country会触发报错，导致渲染失败。
4. 空query触发无效请求：初始query为空字符串时，发起的请求返回数据可能不符合预期，且未做处理。

修复后的代码 #

1. API服务（移除多余导入）

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

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

2. 组件代码（修正rxResource用法）

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

@Component({
  selector: 'app-blogs',
  templateUrl: './blogs.component.html',
  styleUrl: './blogs.component.scss'
})
export class BlogsComponent {
  apiService = inject(ApiService);
  query = signal('');

  rxBlog = rxResource({
    // 直接传入query信号，自动监听变化
    request: this.query,
    // loader接收request的当前值作为参数
    loader: (name) => {
      // 空query返回空数据，避免无效请求
      if (!name.trim()) {
        return new Observable(subscriber => {
          subscriber.next({ country: [] });
          subscriber.complete();
        });
      }
      return this.apiService.GET(`https://api.nationalize.io/?name=${name}`).pipe(
        distinctUntilChanged()
      );
    }
  });

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

3. 模板代码（增加空值判断与优化）

<p>blogs works!</p>

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

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

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

  <!-- 先判断数据存在性，再渲染列表 -->
  @if (blogsData && blogsData.country.length > 0) {
    @for (country of blogsData.country; track country.country_id) {
      <li>{{ country.country_id }}</li>
    }
  } @else if (!isLoading && !error) {
    <p>No data found</p>
  }
</ul>

关键修改说明 #

• request参数修正：直接传入this.query信号，rxResource会自动监听其变化，触发loader执行。
• loader参数传递：通过loader的入参获取最新的query值，避免闭包导致的旧值问题。
• 空query处理：当query为空时返回空数据，避免无效请求，同时保证模板有可渲染的结构。
• 模板空值防护：先判断blogsData是否存在，再访问country属性，避免undefined报错；添加无数据提示提升体验。
• @for循环优化：增加track country.country_id，符合Angular 17+的性能优化要求。

内容的提问来源于stack exchange，提问作者ivy