Angular组件中已获取数据但无法在HTML显示的技术求助

问题场景 #

开发Angular的CandidatComponent组件获取视频详情时，通过console.log已确认成功获取数据，但使用async管道的HTML模板页面内容为空。

原TypeScript代码 #

export class CandidatComponent implements OnInit {
  video$: Observable<VideoPayload> = new Observable<VideoPayload>();; 
  permaLink: Number = 0;

  constructor(
    private router: ActivatedRoute, 
    private videoService: VideoService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.router.params.subscribe(params => {
      this.permaLink = params['id'];
    });

    this.video$ = this.videoService.getVideo(this.permaLink);

    this.video$.subscribe((data:VideoPayload) => {
      this.cdr.detectChanges();
      console.log(data);
    },(err: any) => {
      console.log('Failure Response');
    })
  }
}

原HTML模板 #

<div *ngIf="(video$ | async) as video">
  <h3>
    {{video.title}} 
  </h3>
  <p>{{video.description}}</p>
</div>

问题分析 #

1. 异步时机错误：router.params是异步Observable，执行this.video$ = this.videoService.getVideo(this.permaLink)时，permaLink仍为初始值0，导致video$绑定的是请求初始id的Observable，后续permaLink更新后并未重新触发视频请求。
2. 重复订阅与冗余操作：手动订阅video$会导致重复请求，且ChangeDetectorRef.detectChanges()属于冗余操作——async管道会自动触发Angular变更检测。

修复方案 #

使用RxJS的switchMap操作符，将路由参数的Observable与视频请求Observable串联，确保路由参数变化时自动请求对应视频数据，同时移除冗余的手动订阅和变更检测代码。

修复后的TypeScript代码 #

import { switchMap } from 'rxjs/operators';

export class CandidatComponent implements OnInit {
  video$: Observable<VideoPayload>; 

  constructor(
    private router: ActivatedRoute, 
    private videoService: VideoService
  ) {}

  ngOnInit() {
    this.video$ = this.router.params.pipe(
      switchMap(params => {
        // 将路由参数中的id转换为数字类型（适配VideoService的参数要求）
        const permaLink = +params['id'];
        return this.videoService.getVideo(permaLink);
      })
    );
  }
}

说明 #

• switchMap会在路由参数变化时自动取消之前的视频请求（避免无效请求），并发起新的请求。
• 保留原HTML模板不变，async管道会自动订阅video$，并在数据返回后更新视图。

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