Angular13调用API用*ngFor渲染报错：仅允许数组和可迭代对象

报错Error trying to diff 'Test Auction Name One'. Only arrays and iterables are allowed的核心原因是*ngFor遍历的auctionList变量被赋值为字符串类型，不符合*ngFor仅支持遍历数组/可迭代对象的要求。从报错携带的字符串值可以判断，代码逻辑存在异常，误将单个拍卖项的name字段值赋值给了auctionList。

1. 修正Service层RxJS逻辑错误 #

你当前Service层的map操作符写法不规范，map仅应做值转换逻辑，不要在内部做属性赋值这类副作用操作，副作用逻辑统一放到tap中实现。多余的Service层属性赋值极易引发值传递异常，修正后代码如下：

// 记得在Service的constructor中正确注入HttpClient
constructor(private http: HttpClient) {}

getAPI(): Observable<Auction[]> { 
  return this.http.get<Auction[]>('https://localhost:5001/api/auction')
  .pipe(
    tap(data => console.log('接口原始返回值:', data, '是否为数组:', Array.isArray(data))),
    catchError(this.handleError)
  );    
}

*注意：删除原来map中给Service自身auctionList属性赋值的逻辑，数据流会自动将接口返回值传递给订阅者，无需额外在Service层存储数据。

2. 修正Component层依赖注入与方法调用错误 #

你贴出的Component代码存在明显逻辑缺失：构造函数仅注入了HttpClient，未注入自定义的AuctionService，但代码中直接调用了属于Service层的getAPI()方法，说明你大概率在组件内部遗留了测试用的临时getAPI方法，该方法返回了错误的字符串值。修正后代码如下：

// 引入自定义的AuctionService，路径替换为你项目中的实际路径
import { AuctionService } from './auction.service';

export class AppComponent implements OnInit {
  errorMessage = ''; 
  auctionList: Auction[] = [];       

  // 正确注入AuctionService，禁止直接在组件中调用HttpClient
  constructor(private auctionService: AuctionService) {}

  ngOnInit(): void {      
    this.getAuctionList(); 
  }

  getAuctionList() { 
    this.auctionService.getAPI().subscribe({
      next: response => { 
        console.log('组件接收到的响应值:', response);
        // 增加类型校验，避免非数组值赋值
        if (Array.isArray(response)) {
          this.auctionList = response;                                     
        } else {
          console.error('接口返回值类型异常，期望数组，实际得到:', typeof response, response);
        }
      },
      error: err => this.errorMessage  = err      
    }); 
  }
}

3. 校验后端接口返回结构 #

如果前两步修正后仍报错，查看控制台打印的接口返回值：

• 如果返回值是单个Auction对象而非数组，说明ASP.Net Core接口实际返回的是单条数据，要么修改后端代码返回拍卖列表数组，要么前端赋值时手动包裹为数组：this.auctionList = [response]
• 如果返回值直接是Test Auction Name One字符串，检查后端接口代码，是否误写为返回Ok(单个拍卖项.Name)而非Ok(拍卖列表数组)。

4. 模板代码无需修改 #

你当前贴出的HTML模板写法符合规范，只要auctionList为数组即可正常渲染：

Auction List: 
<ul>
  <li *ngFor="let item of auctionList">
    {{ item.auctionId }}        
  </li>  
</ul>

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