TypeScript(Ionic)中解构对象数组遇阻：无法访问API返回属性

1. 修正接口定义（避免类型错误与命名冲突） #

首先将后端提供的接口重命名（避免和全局Response对象冲突），并替换服务中的错误接口：

// 定义正确的实体接口，重命名避免冲突
export interface Restaurant {
  id: string
  title: string
  text: string
  type: string
  images: any[]
  location: Location
  isDinner: boolean
  isDelivery: boolean
  storeInfo: StoreInfo
  categoryId: string
}

export interface RootResponse {
  response: Restaurant[]
}

export interface Location {
  type: string
  coordinates: number[]
}

export interface StoreInfo {
  id: string
  geoLocation: GeoLocation
  userPoint: number
  workingHours: any[]
  status: string
  rate: number
  minOrderPrice: number
}

export interface GeoLocation {
  latitude: number
  longitude: number
}

2. 修复服务文件的类型与请求头 #

将服务中的ApiResult替换为正确的RootResponse接口，并修正HTTP头的规范写法：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { RootResponse } from './your-interface-path'; // 替换为实际接口路径

@Injectable({
  providedIn: 'root',
})
export class RestaurantsService {
  input = {
    skip: 0,
    limit: 5,
    latitude: 38.418523,
    longitude: 27.127399,
  };

  constructor(private http: HttpClient) {}

  getCloseRestaurants(): Observable<RootResponse> {
    const header = new HttpHeaders({
      accept: 'application/json',
      apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
      'Content-Type': 'application/json', // 修正HTTP头的规范写法
    });
    return this.http.post<RootResponse>(
      `https://smarty.kerzz.com:4004/api/mock/getFeed`,
      this.input,
      { headers: header }
    );
  }
}

3. 修正页面组件的数据处理 #

明确数组类型，并添加错误处理与数据校验：

import { OnInit } from '@angular/core';
import { RestaurantsService } from './restaurants.service';
import { LoadingController } from '@ionic/angular'; // 假设是Ionic项目，根据实际框架调整
import { Restaurant } from './your-interface-path';

export class RestaurantsPage implements OnInit {
  restaurants: Restaurant[] = []; // 明确指定数组类型

  constructor(
    private restaurantsService: RestaurantsService,
    private loadingCtrl: LoadingController
  ) {}

  ngOnInit() {
    this.loadRestaurants();
  }

  async loadRestaurants() {
    const loading = await this.loadingCtrl.create({
      message: 'Loading..',
      spinner: 'bubbles',
    });
    await loading.present();

    this.restaurantsService.getCloseRestaurants().subscribe({
      next: (res) => {
        loading.dismiss();
        // 校验返回的response是否为有效数组
        if (Array.isArray(res.response)) {
          this.restaurants = [...res.response, ...this.restaurants];
          console.log('加载成功:', this.restaurants);
        } else {
          console.error('API返回的response不是数组:', res.response);
        }
      },
      error: (err) => {
        loading.dismiss();
        console.error('加载失败:', err);
      }
    });
  }
}

4. 模板中正确渲染数据 #

添加空状态判断，确保数组有数据时再渲染：

<div *ngIf="restaurants.length > 0; else emptyState">
  <div *ngFor="let item of restaurants" class="restaurant-card">
    <h2>{{ item.title }}</h2>
    <p>{{ item.text }}</p>
    <span>ID: {{ item.id }}</span>
    <p>是否支持配送: {{ item.isDelivery ? '是' : '否' }}</p>
    <p>评分: {{ item.storeInfo.rate }}</p>
  </div>
</div>

<ng-template #emptyState>
  <p>暂无餐厅数据</p>
</ng-template>

额外排查点 #

• 确认API返回的JSON结构确实是{ "response": [ ... ] }，如果结构不符（比如嵌套更深、键名错误），需要同步调整接口定义。
• 若日志显示res.response是数组但无法访问元素，可打印typeof res.response确认是否为字符串，若是则需用JSON.parse(res.response)解析。

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