Angular 5中‘is not a function’错误求助（附ShoppingCart类代码）

我来帮你一步步排查这个问题，结合你贴的代码和Angular 5的常见场景，主要有几个方向需要检查：

1. 最常见原因：未正确实例化ShoppingCart对象 #

如果你的ShoppingCart数据是从后端（比如Firebase）获取的JSON数据，直接把JSON对象赋值给变量而不是通过构造函数创建实例，就会导致类的原型方法（比如getQuantity）不存在——因为JSON只是普通对象，不是ShoppingCart的实例。

错误示例：

// 直接把后端返回的JSON赋值，这是普通对象，没有ShoppingCart的方法
this.cart = data.payload.val();

解决办法：
必须把获取到的itemsMap传入构造函数，创建真正的ShoppingCart实例：

this.cart = new ShoppingCart(data.payload.val());

2. 补全未实现的getQuantity方法 #

你贴的代码里getQuantity方法只写了一半：let item = this.it...，如果调用了未完成的方法，也会抛出错误。这里给你补全完整的实现：

getQuantity(product: Product) {
  // 从itemsMap中查找对应商品的条目
  let item = this.itemsMap[product.id];
  // 有则返回数量，无则返回0
  return item ? item.quantity : 0;
}

3. 检查服务中的数据流处理 #

如果ShoppingCart是通过服务提供的，要确保在服务中返回的是实例化后的对象，而不是原始JSON。比如在Angular服务中：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class ShoppingCartService {
  constructor(private db: AngularFireDatabase) {}

  getCart(): Observable<ShoppingCart> {
    return this.db.object('/cart')
      .valueChanges()
      // 把后端返回的JSON数据转换成ShoppingCart实例
      .map(itemsMap => new ShoppingCart(itemsMap));
  }
}

验证步骤 #

1. 先确认调用getQuantity的对象是通过new ShoppingCart()创建的实例，而非普通JSON对象
2. 补全getQuantity方法的代码
3. 检查服务中是否正确将数据映射为ShoppingCart实例

按照这几个步骤排查，应该能解决你的“is not a function”错误。

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