Angular中ngFor绑定数组为空时能否动态传入虚拟占位数组

结论：ngFor 原生不支持你期望的微语法自定义配置写法。
ngFor 的微语法中，分号后仅支持 Angular 为 NgForOf 指令预定义的输入属性（比如trackBy），框架没有开放微语法的自定义扩展入口，因此无法直接实现 *ngFor="let i of []; skeletonLoadingCount:10" 这种写法。
你当前实现的自定义管道已经是成本很低的通用方案，如果需要进一步简化代码，可以参考以下两种方案： #

方案1：组件类内处理数据源，移除管道依赖 #

不需要额外维护自定义管道，直接在组件中通过计算属性处理渲染用的数据源，空状态/加载中状态直接返回对应长度的占位数组即可：

// 组件类代码
// 真实业务数据源，比如接口返回值
realList: any[] = [];
// 骨架屏占位数量
skeletonCount = 10;
// 接口加载状态
loading = false;

// 供模板绑定的渲染数据源
get renderList() {
  // 结合加载状态判断，避免接口真的返回空数组时也显示骨架屏
  if (this.loading || !Array.isArray(this.realList) || this.realList.length === 0) {
    return Array(this.skeletonCount).fill(null);
  }
  return this.realList;
}

模板直接绑定计算属性即可，不需要管道：

<div *ngFor="let item of renderList; trackBy: trackByFn">
  <!-- 骨架屏占位 -->
  <app-skeleton-line *ngIf="!item; else realItemTpl"></app-skeleton-line>
  <!-- 真实内容 -->
  <ng-template #realItemTpl>
    <span>{{item.title}}</span>
  </ng-template>
</div>

这种方案逻辑聚合在组件内，不需要额外维护公共管道，还可以结合接口加载状态做更精准的判断，避免真实空列表和加载状态混淆。 #

方案2：自定义结构型指令，实现类原生ngFor的语法 #

如果项目中骨架屏场景很多，可以封装独立的结构型指令，完全实现你期望的简洁语法：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appSkeletonFor][appSkeletonForOf]'
})
export class SkeletonForDirective {
  // 占位数量默认值
  @Input() appSkeletonForCount = 6;
  // 接收真实数据源
  @Input() set appSkeletonForOf(realData: any[]) {
    this.viewContainer.clear();
    const isSkeleton = !Array.isArray(realData) || realData.length === 0;
    const renderData = isSkeleton 
      ? Array.from({length: this.appSkeletonForCount}, (_, i) => i)
      : realData;
    
    renderData.forEach((item, index) => {
      this.viewContainer.createEmbeddedView(this.templateRef, {
        $implicit: item,
        index: index,
        isSkeleton: isSkeleton
      });
    });
  }

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}
}

在模块中声明该指令后，模板就可以用接近原生ngFor的写法：

<div *appSkeletonFor="let item of realList; count:10; let isSkeleton = isSkeleton">
  <app-skeleton-card *ngIf="isSkeleton"></app-skeleton-card>
  <app-real-card *ngIf="!isSkeleton" [data]="item"></app-real-card>
</div>

这种方案一次封装后全局可用，不需要在每个组件写重复的空值判断，也不需要管道，语法简洁度完全符合预期。 #

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