如何在Ionic的*ngFor无数据时切换显示自定义组件？

当然可以实现这个需求！你只需要利用Angular的结构型指令，根据kids数组的状态切换显示内容就行，下面是两种常用的实现方式：

方式一：使用*ngIf else（推荐，避免重复判断） #

这种方式会先判断kids数组是否有内容，有则显示ion-select，否则展示你的自定义组件，逻辑更清晰：

<ion-item>
  <!-- 当kids数组不为空时展示选择器 -->
  <ion-select *ngIf="kids.length > 0; else emptyState" interface="popover" [ngModel]="selectedKidId">
    <ion-option *ngFor="let kid of kids" [value]="kid.id">{{kid.name}}</ion-option>
  </ion-select>

  <!-- 空状态模板：展示自定义组件 -->
  <ng-template #emptyState>
    <!-- 替换成你自己的自定义组件标签 -->
    <your-custom-empty-component></your-custom-empty-component>
  </ng-template>
</ion-item>

方式二：使用两个独立的*ngIf #

如果觉得模板引用的方式不够直观，也可以分别给两个组件加判断条件：

<ion-item>
  <ion-select *ngIf="kids.length > 0" interface="popover" [ngModel]="selectedKidId">
    <ion-option *ngFor="let kid of kids" [value]="kid.id">{{kid.name}}</ion-option>
  </ion-select>

  <!-- 当数组为空时展示自定义组件 -->
  <your-custom-empty-component *ngIf="kids.length === 0"></your-custom-empty-component>
</ion-item>

注意事项： #

• 记得把your-custom-empty-component替换成你实际创建的自定义组件的标签名，并且要确保这个组件已经在当前页面所属的NgModule中完成声明（declarations）和导出（exports），否则Angular无法识别它。
• 如果你的kids数组是通过异步请求获取的（比如从后端API拉取），Angular的变更检测机制会自动监听数组的变化，无需额外操作就能自动切换视图。
• 要是需要给自定义组件传递数据（比如当前选中的selectedKidId），可以通过组件的@Input()属性来实现。

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