Angular12调用GET接口后ngFor渲染表格无数据如何解决

问题原因 #

ngFor仅支持遍历数组类型数据，你当前的接口返回的是外层包裹了success/message/data的对象，直接将整个返回对象传给ngFor会触发类型不匹配报错，实际需要遍历的数组存储在返回对象的data字段中。

修复方案（推荐，服务层统一处理） #

1. 修改get-service.service.ts

导入rxjs的map操作符，在服务请求后直接提取data字段返回：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators'; // 新增导入

@Injectable({
  providedIn: 'root'
})
export class GetServiceService {

  constructor(
    private http: HttpClient
  ) { }

  getCampaign(){
    // 新增pipe(map)提取data字段
    return this.http.get('https://emaillead.aturtoko.id/api/v1/campaign').pipe(
      map((res: any) => res.data)
    );
  }
}

2. 可选优化：给组件变量加类型声明（增强类型安全）

修改campaign.component.ts：

import { Component, OnInit } from '@angular/core';
import { GetServiceService } from '../get-service.service';
import { Observable } from 'rxjs'; // 新增导入

@Component({
  selector: 'app-campaign',
  templateUrl: './campaign.component.html',
  styleUrls: ['./campaign.component.css']
})
export class CampaignComponent implements OnInit {
  // 明确声明变量为数组类型的Observable
  campaigns: Observable<{id: number, name: string}[]>;
  constructor(
    private campaignService: GetServiceService,
  ) { }

  ngOnInit(): void {
    this.campaigns = this.campaignService.getCampaign();
  }
}

原有模板代码无需修改即可正常渲染表格数据。 #

轻量修复方案（仅改模板，无需修改逻辑代码） #

如果不想调整服务和组件代码，直接修改模板里的*ngFor遍历逻辑，取返回对象的data字段即可：

<tr *ngFor="let campaign of (campaigns | async)?.data">

用可选链?.避免接口请求完成前空值报错。 #

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