Angular中API返回数组日志正常但无法渲染数据问题

参照Angular英雄示例开发时，API返回内容在控制台日志显示正常，但在HTML中通过*ngFor循环渲染地区对象的title时无预期效果，获取数组长度返回undefined。

相关代码 #

LookupServices服务代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';


@Injectable({ providedIn: 'root' })
export class LookupServices  {
  apiUrl = 'https://localhost:1400/api/lookups'
  constructor(private http: HttpClient) {}
  getRegions(): Observable<Lookups[]> {
    return this.http.get<Lookups[]>(`${this.apiUrl}/regions`)
  }
}

export class Lookups {
  id: number;
  title: string;
  constructor(id:number, title:string) {
    this.id = id;
    this.title = title;
  }
}

MainDashbaordComponent组件代码 #

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

import { LookupServices, Lookups } from '../services/lookup.services'

@Component({
  selector: 'app-main-dashboard',
  templateUrl: './main-dashboard.component.html',
})
export class MainDashbaordComponent implements OnInit {
  regions: Lookups[] = [];
  constructor(private lookupServices: LookupServices) { }

  ngOnInit(): void {
    this.getRegions();

  }

  getRegions(): void {
    this.lookupServices.getRegions().subscribe((data: Lookups[]) => {
      this.regions = data;
      console.log(this.regions)
    })
    
  }
}

组件HTML代码 #

<div class="row">
  <form novalidate="" class="form">
    <div class="row">
      <div class="col-xl-3">
        <select class="form-select form-select-solid form-select-lg fw-bold"
                name="country">
          <option value="">Select a Country...</option>
          <ng-container *ngFor="let region of regions">
            <option value="region.id">{{region?.title}}</option>
          </ng-container>
        </select>
      </div>
    </div>
  </form>
</div>

控制台API返回结构 #

{content: Array(10), succeeded: true, message: null, errors: null}
content: 
Array(10)
0: {id: 1, title: 'Region 1'}
1: {id: 2, title: 'Region 2'}
2: {id: 3, title: 'Region 3'}
3: {id: 4, title: 'Region 4'}
4: {id: 5, title: 'Region 5'}
5: {id: 6, title: 'Region 6'}
6: {id: 7, title: 'Region 7'}
7: {id: 8, title: 'Region 8'}
8: {id: 9, title: 'Region 9'}
9: {id: 10, title: 'Region 10'}
length: 10

问题原因 #

核心问题是API返回的并非直接的地区数组，而是一个包含content数组的响应对象，但服务代码直接将返回值断言为Lookups[]类型，导致组件中this.regions被赋值为整个响应对象而非内部的content数组。此时regions不是数组，*ngFor无法遍历，获取长度自然返回undefined。

另外HTML中option的value属性使用了字符串"region.id"，而非绑定到实际的region.id值，这会导致选中值不符合预期。

修复步骤 #

1. 修改服务，提取响应中的content数组 #

更新LookupServices的getRegions方法，使用map操作符从响应对象中提取content数组：

getRegions(): Observable<Lookups[]> {
  return this.http.get<{content: Lookups[]}>(`${this.apiUrl}/regions`)
    .pipe(
      map(response => response.content) // 提取content数组
    );
}

2. 修正HTML中的value绑定 #

将HTML中option的value改为属性绑定，确保绑定到实际的region.id：

<option [value]="region.id">{{region?.title}}</option>

3. 可选：优化类型定义 #

可以为API响应创建专门的类型，提升代码可读性：

export interface ApiResponse<T> {
  content: T[];
  succeeded: boolean;
  message: string | null;
  errors: any[] | null;
}

// 然后修改getRegions方法
getRegions(): Observable<Lookups[]> {
  return this.http.get<ApiResponse<Lookups>>(`${this.apiUrl}/regions`)
    .pipe(
      map(response => response.content)
    );
}

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