Angular Signal未触发模板变更问题求助

问题描述 #

通过Service和SSE接收数据，代码已触发且alert能正确显示更新后的Signal值，但模板中的@if/@else条件渲染未生效。

相关代码 #

TypeScript组件代码 #

@Component({
  selector: 'app-onb',
  standalone: true,
  imports: [],
  templateUrl: './onb.component.html',
})
export class OnbComponent implements OnDestroy {
  receivedData: any;
  onbResponse = signal<any[]>([]);
  private sseSubscription?: Subscription;

  constructor(
    private router: Router,
    private onbService: OnbService,
  ) {
    const navigation = this.router.getCurrentNavigation();
    this.sseSubscription = this.onbService.run().subscribe({
          next: (data) => {
            this.onbResponse.update((values) => {
              if (!values) {
                return [data];
              }
              return [...values, data];
            });
            alert(this.onbResponse()); // 此处能正确显示更新后的值
          },
          error: (error) => {
            console.error('Received SSE error:', error);
          },
        });
    }
}

HTML模板代码 #

@if (onbResponse().length == 0) {
    <p>loading</p>
} @else {
   {{onbResponse()}}strong text
}

问题排查与解决 #

1. 修复模板语法错误 #

模板的@else块中存在语法错误：{{onbResponse()}}strong text未正确使用HTML标签，导致Angular模板解析失败，直接影响控制流逻辑执行。

修正后的模板代码：

@if (onbResponse().length == 0) {
    <p>loading</p>
} @else {
   <div>{{onbResponse()}}</div>
   <strong>strong text</strong>
}

2. 导入Standalone组件所需模块 #

即使使用Angular 17+新控制流语法，Standalone组件仍需导入CommonModule以支持基础模板渲染能力。在组件的imports数组中添加该模块：

imports: [CommonModule],

3. 优化Signal更新逻辑（可选） #

当前Signal更新逻辑中的if (!values)判断多余（初始值为[]，不会为null/undefined），可简化为：

this.onbResponse.update((values) => [...values, data]);

验证 #

完成上述修改后重新运行项目，SSE接收数据更新Signal时，模板的@if/@else条件渲染会正常触发，加载状态将被数据内容替换。

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