使用RxJS Observable转换Angular Signal时始终返回空数组

你遇到的空数组问题，核心原因是HTTP请求是异步操作：当你在ngOnInit里立刻调用console.log(this.data())时，Observable还没从后端拿到数据，此时Signal返回的是你设置的initialValue: []。虽然最终Observable会返回5个对象，但日志已经提前打印了初始值。

另外，你的组件代码存在冗余操作——组件生命周期钩子（比如ngOnInit）本身就运行在Angular的注入上下文里，不需要额外用runInInjectionContext包裹。

1. 监听Signal的变化（正确查看更新后的数据） #

要看到Signal更新后的真实数据，需要用effect监听Signal的变化，而不是初始化后立即打印：

import { Component, Signal, inject, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpringAPIService } from '../spring-api.service';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-projects',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './projects.component.html',
  styleUrl: './projects.component.scss'
})
export class ProjectsComponent {
  private apiService = inject(SpringAPIService);
  // 直接在类初始化时创建Signal，无需等到ngOnInit
  data: Signal<any[]> = toSignal(this.apiService.getData('projects'), { initialValue: [] });

  constructor() {
    // 用effect监听Signal变化，数据更新时自动触发
    effect(() => {
      console.log('更新后的数据:', this.data());
    });
  }
}

2. 简化代码（移除冗余的注入上下文包裹） #

原来的runInInjectionContext完全没必要，组件的ngOnInit、构造函数都处于Angular的注入上下文环境中，直接初始化Signal即可。

3. 在模板中使用Signal #

在组件模板里直接使用Signal时，Angular会自动跟踪其变化并更新视图，不需要手动订阅：

<!-- projects.component.html -->
<ul>
  <li *ngFor="let item of data()">{{ item.name }}</li>
</ul>

• toSignal会先返回设置的initialValue，直到Observable发出第一个值，Signal才会更新。
• 用effect可以监听Signal的变化，在数据更新时执行逻辑（比如打印日志）。
• 组件生命周期钩子和构造函数都运行在注入上下文里，无需额外调用runInInjectionContext。

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