Angular中RxJS响应返回前HTML已渲染的问题求助

方法1：添加加载状态控制 #

新增加载状态变量，控制请求完成前不显示结果内容，也可添加加载提示：

TS代码修改 #

ngOnInit(): void {
    this.getMedias();
}

medias: Array<T> = [];
isLoading = true; // 新增加载状态标记

getMedias() {
   this.controllerApiService
   .getById()
   .subscribe({
     next: (data) => {
       this.medias = data;
     },
     complete: () => {
       this.isLoading = false; // 请求完成后关闭加载状态
     },
     error: () => {
       this.isLoading = false; // 出错时也关闭加载状态
     }
   });
}

HTML代码修改 #

<!-- 加载状态下的提示 -->
<div *ngIf="isLoading">
    加载中...
</div>

<div *ngIf="!isLoading && medias.length > 0">
    some text
</div>

<div *ngIf="!isLoading && medias.length === 0">
    some other text
</div>

方法2：将medias初始化为undefined #

利用Angular *ngIf对undefined的判断逻辑，初始时不渲染任何结果区块，直到请求返回后再进行判断：

TS代码修改 #

ngOnInit(): void {
    this.getMedias();
}

medias: Array<T> | undefined; // 初始化为undefined，而非空数组

getMedias() {
   this.controllerApiService
   .getById()
   .subscribe(data => {
     this.medias = data;
   });
}

HTML代码修改 #

<div *ngIf="medias && medias.length > 0">
    some text
</div>

<div *ngIf="medias && medias.length === 0">
    some other text
</div>

为什么skip/skipWhile操作符无效？ #

skip()或skipWhile()是针对Observable数据流的操作符，作用于订阅后的数据流处理，但你的问题根源是组件初始化时medias被设为空数组，导致HTML直接渲染了第二个区块。这些操作符无法改变组件初始状态下的变量值，因此不会产生效果。

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