Angular中使用*ngIf结合TypeScript展示无结果提示的问题解决

你已经走在正确的路上啦！核心问题在于你的接口会返回两种不同类型的数据（产品数组或者"No result"字符串），我们只需要调整变量类型并在模板里做针对性的条件渲染就能解决。

第一步：调整TypeScript变量类型 #

首先把接收接口返回值的prod变量改成联合类型，让它既能容纳产品数组，也能接收字符串：

products: Product[] = [];
prod: Product[] | string = []; // 修改为联合类型，兼容两种返回值

getallproduct() {
  this.activatedRoute.params.subscribe(
    params => {
      this.ws.product(params['id']).subscribe(
        products => {
          this.prod = products;
          console.log(products); // 现在prod可以是产品数组或"No result"字符串
        }
      );
    }
  );
}

第二步：在HTML模板中用*ngIf实现条件渲染 #

这里提供两种简洁的实现方式，你可以根据自己的代码风格选择：

方式一：直接判断值类型和内容

<!-- 当接口返回"No result"时显示提示 -->
<div *ngIf="prod === 'No result'" class="no-result-text">No result</div>

<!-- 仅当prod是数组且有产品时渲染表格 -->
<table *ngIf="Array.isArray(prod) && prod.length > 0">
  <tr *ngFor="let item of prod">
    <!-- 替换成你的表格内容，比如产品名称、价格等 -->
    <td>{{ item.name }}</td>
    <td>{{ item.price }}</td>
  </tr>
</table>

方式二：使用ng-template和else块（结构更清晰）

如果想让模板逻辑更模块化，可以用ng-container配合else拆分渲染逻辑：

<!-- 处理产品数组的情况 -->
<ng-container *ngIf="Array.isArray(prod); else noResultTemplate">
  <table *ngIf="prod.length > 0">
    <tr *ngFor="let item of prod">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </table>
  <!-- 可选：处理接口返回空数组的情况 -->
  <div *ngIf="prod.length === 0">No products available</div>
</ng-container>

<!-- 无结果提示模板 -->
<ng-template #noResultTemplate>
  <div class="no-result-text">{{ prod }}</div>
</ng-template>

小提示 #

• 用Array.isArray(prod)是为了精准判断返回值类型，避免在prod是字符串时触发*ngFor导致报错。
• 可以给.no-result-text添加CSS样式，让提示信息更醒目，提升用户体验。

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