Angular 18迁移报错：TypeError: res is not iterable（扩展运算符导致）

错误日志 #

ERROR TypeError: res is not iterable
    onEscalate details.component.ts:735
    RxJS 5
        next
        _next
        next
        next
        errorContext
core.mjs:7185:18
    Angular 2
        handleError
        next
    RxJS 6
    Angular 22
        emit
        onHandleError
        invoke
        run
        runOutsideAngular
        onHandleError
        handleError
        runTask
        invokeTask
        invoke
        0
    (Async: setTimeout handler)
        scheduleTask
        scheduleTask
        onScheduleTask
        scheduleTask
        onScheduleTask
        scheduleTask
        scheduleTask
        scheduleMacroTask
        scheduleMacroTaskWithCurrentZone
        setNative
        name
    RxJS 9
        setTimeout
        reportUnhandledError
        handleUnhandledError
        next
        _next
        next
        next
        errorContext
        next
    Angular 3
    RxJS 6
    Angular 4
    RxJS 15
    Angular 26
    onSubmit escalation-assign.component.ts:130
    EscalationAssignComponent_Template_button_click_98_listener escalation-assign.component.html:171
    Angular 28
    EscalationAssignComponent_Template escalation-assign.component.html:171
    Angular 13
    onEscalate details.component.ts:695

问题分析 #

错误出在details.component.ts的onEscalate方法第735行，代码尝试对res执行迭代操作（比如for...of循环、数组解构、扩展运算符），但当前res并非数组、Set这类可迭代对象。结合Angular跨大版本升级的背景，大概率是响应数据结构或HttpClient返回格式和旧版本不一致导致的。

排查与解决步骤 #

1. 定位迭代代码
   找到details.component.ts第735行，确认对res进行迭代的具体写法，比如：

   // 可能的问题代码示例
   const [result, err] = res;
   // 或者
   for (const item of res) { /* ... */ }
   

2. 查看res的真实结构
   在onEscalate方法中添加调试代码，或者用浏览器断点查看res的实际类型和数据：

   console.log('res类型:', typeof res);
   console.log('res结构:', res);
   

3. 根据实际结构修正代码

   • 如果res是Angular的HttpResponse对象（跨版本升级后若使用observe: 'response'会返回完整响应，而非直接返回响应体），需要取res.body获取实际数据：

     const actualData = res.body;
     for (const item of actualData) { /* ... */ }
     

   • 如果后端接口返回格式变更（比如原本直接返回数组，现在返回{ data: [] }这类包裹对象），则提取对应的数组属性：

     const actualData = res.data;
     for (const item of actualData) { /* ... */ }
     

   • 如果res可能为null或undefined，先做兜底处理避免报错：

     const iterableData = res ?? [];
     for (const item of iterableData) { /* ... */ }
     

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