Angular 8：TypeError：发现不可调用的@@iterator

Question

当我发送http get 请求时，我收到这些错误TypeError: Found non-callable @@iterator，但它在Angular 7 中有效，在Angular 8 中无效。

我的组件文件
从component.ts 文件我调用了服务getCodes()

onSubmit(){
 this.service.getCodes('localhost/Aggregator/getCodes').subscribe (result=>{
 }, error =>{
    console.log(error);
 })
}

我的拦截器文件
当我发送请求时，我已经通过拦截器传递了这些标头

@Injectable()
    export class Interceptor implements HttpInterceptor {
      sessionParam:any = {
        userParam: {
          'a':66,
          'b':101,
          'c':'0201',
          'd':'Y',
          'e':'Y',
          'h':'2019/02/22',
          'f':'Y',
          'g':12
        }
      }

      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let headers = new HttpHeaders();
        for (var val in this.sessionParam) {
          Object.keys(this.sessionParam[val]).forEach(key => {
            headers = headers.append(key,this.sessionParam[val][key]);
          });
        }
        request = request.clone({
          headers: headers
        })
        return next.handle(request);
      }
    }

我的服务文件

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

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

  constructor(private http:HttpClient) { }

  public getCodes(url, apiParam=null):Observable<any>
  {
    return this.http.get(url, {params: apiParam});
  }
}

我收到以下错误

TypeError: Found non-callable @@iterator
at HttpHeaders.applyUpdate (http.js:301)
at http.js:245
at Array.forEach (<anonymous>)
at HttpHeaders.init (http.js:241)
at HttpHeaders.forEach (http.js:339)
at Observable._subscribe (http.js:1826)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at subscribeTo.js:20
at subscribeToResult (subscribeToResult.js:7)

有什么解决办法吗？

Answer 1

当您设置标题非字符串值时会发生此错误。为了解决将所有标头值转换为字符串。

Answer 2

我已经从 A7 升级到 A8 并且遇到了同样的问题。

在我的情况下，代码在我使用解构赋值的行上失败了：

return this.fooPipe.transform(foo, ...args);

-> Error: Found non-callable @@iterator

它帮助我将 tsconfig.json 从：

"target": "es2015"

到

"target": "es5"

Answer 3

无法发表评论，但我建议您查看以 headers 对象结尾的数据。也许您可以在return next.handle(request); 行之前记录headers 的内容。例如，您会发现this.sessionParam[val][key] 提供的值之一不是字符串，而简单的this.sessionParam[val][key] + '' 可以解决问题...

Answer 4

在我的例子中，我也试图解构一个对象：

console.log('state: ', ...state)

解决方案是在 {} 中解构它：

console.log('state: ', {...state})

Answer 5

这不是一个新的解决方案，但它可能对某人有所帮助。

升级到 Angular 8 后我也遇到了这个问题。它在我使用 Object.assign({},) 的地方抛出了一个错误，它以前可以工作。

我不想更改我使用它的所有代码以支持展开运算符，因为它的更改太多了。

当我将目标更改回 es5 时，它起作用了。但我不确定这是正确的做法。（我仍然不确定这样做有什么好处。）

经过大量搜索，我找到了这个链接https://kangax.github.io/compat-table/es6/#typescript-core-js-note 所以这里声明要让 Object.assign 工作，我需要有

打字稿 > 3.6 & core-js >= 3

目前 angular 8 要求 typescript 小于 3.6 我猜这是错误的原因，所以在 angular 8 支持这个 typescript 版本或 angular 9 之前，我想我将使用与 Felix 相同的方法。

Answer 6

今天遇到了同样的错误，我的解决方案是对 Object 进行迭代，然后使用结果创建 HttpHeaders。 有点...

    let headersObj = {};

    for (var val in this.sessionParam) {
      Object.keys(this.sessionParam[val]).forEach(key => {
        headersObj[key] = this.sessionParam[val][key];
      });
    }
    request = request.clone({
      headers: new HttpHeaders(headersObj)
    })

Answer 7

return this.fooPipe.transform(foo, ...args);

-> Error: Found non-callable @@iterator

这个错误可能意味着你试图在 ES6/ES2015 中传播一个对象而不是一个数组。在 ES5 中你可以传播一个对象，它真正要做的就是传播它的值。这很方便，但是您仍然可以使用诸如下划线或 lodash 之类的库轻松地实现此目的，只需获取值然后传播它们即可。如果您不想使用库，当然也可以自己创建数组。我更喜欢以下方式：

const _ = require('underscore');

return this.fooPipe.transform(foo, ..._.values(args));

Answer 8

使用 Angular 8+ 时，所有 Header 都应该是字符串