AngularJS：如何根据API返回JSON的places数量切换页面内容

这个需求在Angular里实现起来超简单，核心就是用条件渲染指令根据places数组的长度来切换页面内容，我给你拆解下具体步骤和两种常见Angular版本的代码示例：

第一步：控制器/组件里处理API响应 #

首先要确保从REST API获取的JSON数据里的places数组被正确绑定到视图可用的变量上，同时处理请求失败的情况，避免出现undefined导致的页面报错：

如果你用的是AngularJS（1.x版本） #

app.controller('PlacesController', function($scope, $http) {
  // 初始化空数组，避免页面加载时变量未定义
  $scope.places = [];

  // 调用REST API获取数据
  $http.get('/your-api-endpoint')
    .then(function(response) {
      // 确保places始终是数组，处理后端可能返回null的情况
      $scope.places = Array.isArray(response.data.places) ? response.data.places : [];
    })
    .catch(function(error) {
      console.error('获取地点数据失败:', error);
      // 请求失败时也设为空数组，保证页面能正确显示无数据提示
      $scope.places = [];
    });
});

如果你用的是Angular 2+（比如Angular 10+） #

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

@Component({
  selector: 'app-places-view',
  templateUrl: './places-view.component.html'
})
export class PlacesViewComponent implements OnInit {
  // 初始化空数组，避免视图渲染时变量未定义
  places: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<any>('/your-api-endpoint')
      .subscribe({
        next: (response) => {
          // 确保places是数组
          this.places = Array.isArray(response.places) ? response.places : [];
        },
        error: (error) => {
          console.error('获取地点数据失败:', error);
          this.places = [];
        }
      });
  }
}

第二步：HTML模板里用条件渲染切换内容 #

利用Angular的条件指令，判断places的长度，分别渲染不同内容：

AngularJS模板 #

<div ng-controller="PlacesController">
  <!-- 当places数量为0时显示的内容 -->
  <p ng-if="places.length === 0">没有找到任何地点，请尝试调整查询条件~</p>
  
  <!-- 当places数量大于0时显示的内容 -->
  <div ng-if="places.length > 0">
    <h3>已找到 {{places.length}} 个地点</h3>
    <!-- 这里可以遍历展示具体地点，比如用ng-repeat -->
    <ul>
      <li ng-repeat="place in places">{{place.name}} - {{place.address}}</li>
    </ul>
  </div>
</div>

Angular 2+模板 #

<!-- 当places数量为0时显示的内容 -->
<p *ngIf="places.length === 0">没有找到任何地点，请尝试调整查询条件~</p>

<!-- 当places数量大于0时显示的内容 -->
<div *ngIf="places.length > 0">
  <h3>已找到 {{places.length}} 个地点</h3>
  <!-- 遍历展示具体地点，用*ngFor -->
  <ul>
    <li *ngFor="let place of places">{{place.name}} - {{place.address}}</li>
  </ul>
</div>

额外注意点 #

• 一定要初始化places为空数组，这样页面刚加载时（API请求还没返回）也能正确判断长度为0，避免因为变量未定义导致的报错。
• 处理后端返回的places可能不是数组的情况（比如返回null），确保我们始终把它转为数组，这样长度判断才会准确。
• API请求失败时也要把places设为空数组，这样用户能看到无数据提示，而不是空白页面。

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