Angular 4中如何避免数据加载时显示无结果提示？

这个问题的核心是你没有区分「正在加载数据」和「加载完成后确实无数据」这两种状态——初始时allData是undefined，导致*ngIf的条件不满足，直接触发了else的无结果模板。下面给你两种简单有效的解决方案：

方案一：添加加载状态变量（适合非Observable场景） #

步骤1：在Component中添加加载状态 #

先初始化allData为空数组，并新增一个isLoading变量标记加载状态：

import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  allData: any[] = []; // 初始化为空数组
  isLoading = true; // 标记是否正在加载

  ngOnInit() {
    // 模拟你的数据请求（替换成实际的API调用）
    setTimeout(() => {
      // 这里假设请求完成后赋值allData
      this.allData = /* 从接口获取到的数据 */;
      this.isLoading = false; // 加载完成，更新状态
    }, 10000); // 模拟10秒加载耗时
  }
}

步骤2：修改HTML模板逻辑 #

先判断是否处于加载状态，加载完成后再根据数据长度决定显示内容还是无结果提示：

<!-- 加载中可以显示提示，也可以留空 -->
<div *ngIf="isLoading">
  正在加载数据...
</div>

<!-- 加载完成后，有数据则显示内容 -->
<div *ngIf="!isLoading && allData.length > 0">
  This is testing data come from allData variable.
</div>

<!-- 加载完成且无数据时才显示提示 -->
<ng-template #noResultFound>
  <h2 *ngIf="!isLoading">Sorry, no results found.</h2>
</ng-template>

也可以用更简洁的ngIf链式写法：

<div *ngIf="isLoading; else dataContent">
  正在加载数据...
</div>

<ng-template #dataContent>
  <div *ngIf="allData.length > 0; else noResultFound">
    This is testing data come from allData variable.
  </div>
</ng-template>

<ng-template #noResultFound>
  <h2>Sorry, no results found.</h2>
</ng-template>

方案二：使用异步管道（适合Observable数据源） #

如果你的allData是通过Observable获取的（比如HTTP请求返回的Observable），推荐使用Angular的async管道，它会自动处理订阅和状态判断：

步骤1：Component中定义Observable #

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { YourDataService } from './your-data.service';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  allData$: Observable<any[]>; // 用$后缀标记Observable变量

  constructor(private dataService: YourDataService) {}

  ngOnInit() {
    // 从服务获取Observable数据流
    this.allData$ = this.dataService.getAllData();
  }
}

步骤2：HTML中使用异步管道 #

<!-- 数据未返回时显示加载提示，返回后解构数据 -->
<div *ngIf="allData$ | async as allData; else loading">
  <!-- 有数据显示内容，无数据显示提示 -->
  <div *ngIf="allData.length > 0; else noResultFound">
    This is testing data come from allData variable.
  </div>
</div>

<ng-template #loading>
  正在加载数据...
</ng-template>

<ng-template #noResultFound>
  <h2>Sorry, no results found.</h2>
</ng-template>

为什么原来的代码会出问题？ #

初始状态下allData是undefined，此时allData && allData.length > 0的结果是false，所以Angular会直接渲染else对应的noResultFound模板——这就导致加载过程中提前显示了无结果提示。通过添加加载状态或使用异步管道，我们就能明确区分「加载中」和「加载完成无数据」两种场景啦。

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