Angular 6: ERROR TypeError: "... is not a function" - 但它是

Question

我目前真的很困惑，因为我得到了 ERROR TypeError: "_this.device.addKeysToObj is not a function" 。但是我实现了这个函数，所以我不知道是什么问题或者为什么它不可调用。我已经尝试了 Firefox 和 chrome 的代码，都出现了同样的错误。

错误在 this.device.addKeysToObj(this.result.results[0]);

这是我的课：

 export class Device {
    id: number;
    deviceID: string;
    name: string;
    location: string;
    deviceType: string;
    subType: string;
    valueNamingMap: Object;

    addKeysToObj(deviceValues: object): void {
        for (let key of Object.keys(deviceValues).map((key) => { return key })) {
            if (!this.valueNamingMap.hasOwnProperty(key)) {
                this.valueNamingMap[key] = '';
            }
        }
        console.log(this, deviceValues);
    }
}

这就是电话：

 export class BatterieSensorComponent implements OnInit {
    @Input() device: Device;
    public result: Page<Value> = new Page<Value>();

    //[..]

    ngOnInit() {
      this.valueService.list('', this.device).subscribe(
        res => {
          console.log(this.device);  // NEW edit 1
          this.result = res;
          if (this.result.count > 0)
          {
            this.device.addKeysToObj(this.result.results[0]);
          }
        }
      )
    }
}

---

编辑 1

记录 this.device 见上面代码中的注释：

 {
    deviceID: "000000001"
    deviceType: "sensor"    ​
    id: 5    ​
    location: "-"
​    name: "Batteries"    ​
    subType: "sensor"    ​
    valueNamingMap:
      Object { v0: "vehicle battery", v1: "Living area battery" }
    <prototype>: Object { … }
}

编辑 2

部分 device.service 代码：

 list(url?: string, deviceType?: string, subType?: string): Observable<Page<Device>> {
  if(!url) url = `${this.url}/devices/`;
  if(deviceType) url+= '?deviceType=' + deviceType;
  if(subType) url+= '&subType=' + subType;

  return this.httpClient.get<Page<Device>>(url, { headers: this.headers })
    .pipe(
      catchError(this.handleError('LIST devices', new Page<Device>()))
    );
}

父组件中的调用：

 ngOnInit() {
  this.deviceService.list('', 'sensor', ).subscribe(
    res => {
      this.devices = res.results;
    }
  )
}

模板：

 <div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet" *ngFor="let device of devices">
    <app-batterie-sensor [device]="device"></app-batterie-sensor>
  </div>
</div>

原文由 Max 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

原始答案

这是 Typescript 的一个常见问题，你说 device 是 Device 类型，但事实并非如此。它具有与 Device 相同的所有属性，但由于它不是 Device 它没有预期的方法。

您需要确保为 Device 中的每个条目实例化 Page ，可能在父组件的 ngOnInit 中：

我不知道 Page 的结构，但如果它是一个数组，请尝试以下操作。

 ngOnInit() {
  this.deviceService.list('', 'sensor', ).subscribe(
    res => {
      this.devices = res.results.map(x => Object.assign(new Device(), x));
    }
  )
}

---

进一步说明

让我们尝试一个打字稿示例，因为这种行为与 Angular 没有任何关系。我们将使用 localStorage 来表示来自外部源的数据，但这与 HTTP 相同。

 interface SimpleValue {
    a: number;
    b: string;
}

function loadFromStorage<T>(): T {
    // Get from local storage.
    // Ignore the potential null value because we know this key will exist.
    const storedValue = localStorage.getItem('MyKey') as string;

    // Note how there is no validation in this function.
    // I can't validate that the loaded value is actually T
    // because I don't know what T is.
    return JSON.parse(storedValue);
}

const valueToSave: SimpleValue = { a: 1, b: 'b' };
localStorage.setItem('MyKey', JSON.stringify(valueToSave));

const loadedValue = loadFromStorage<SimpleValue>();

// It works!
console.log(loadedValue);

效果很好，太棒了。 typescript 接口纯粹是一种编译时结构，与类不同，它在 JavaScript 中没有等价物——它只是开发人员的提示。但这也意味着，如果您为外部值创建一个接口，例如上面的 SimpleValue 并且 _弄错了_，那么编译器仍然会相信您知道您在说什么，它不能可能在编译时验证这一点。

从外部源加载一个类怎么样？它有什么不同？如果我们采用上面的示例并将 SimpleValue 更改为一个类而不更改任何其他内容，那么它仍然可以工作。但是有区别。与接口不同，类被转译成它们的 JavaScript 等价物，换句话说，它们存在于编译点之后。在我们上面的示例中，这不会导致问题，所以让我们尝试一个确实会导致问题的示例。

 class SimpleClass {
    constructor(public a: number, public b: string) { }

    printA() {
        console.log(this.a);
    }
}

const valueToSave: SimpleClass = new SimpleClass(1, 'b');
localStorage.setItem('MyKey', JSON.stringify(valueToSave));

const loadedValue = loadFromStorage<SimpleClass>();

console.log(loadedValue.a); // 1
console.log(loadedValue.b); // 'b'
loadedValue.printA(); // TypeError: loadedValue.printA is not a function

加载的值有我们期望的属性，但没有方法，呃哦！问题是在调用 new SimpleClass 时会创建方法。当我们创建 valueToSave 我们确实实例化了这个类，但是我们把它变成了一个 JSON 字符串并发送到其他地方，而 JSON 没有方法的概念，所以信息丢失了。当我们在 loadFromStorage 中加载数据时，我们 没有 调用 new SimpleClass ，我们只是相信调用者知道存储的类型是什么。

我们如何处理这个问题？让我们暂时回到 Angular 并考虑一个常见的用例：日期。 JSON 没有 Date 类型，JavaScript 有，那么我们如何从服务器检索日期并将其作为日期工作？这是我喜欢使用的模式。

 interface UserContract {
    id: string;
    name: string;
    lastLogin: string; // ISO string representation of a Date.
}

class UserModel {
    id: string; // Same as above
    name: string; // Same as above
    lastLogin: Date; // Different!

    constructor(contract: UserContract) {
        // This is the explicit version of the constructor.
        this.id = contract.id;
        this.name = contract.name;
        this.lastLogin = new Date(contract.lastLogin);

        // If you want to avoid the boilerplate (and safety) of the explicit constructor
        // an alternative is to use Object.assign:
        // Object.assign(this, contract, { lastLogin: new Date(contract.lastLogin) });
    }

    printFriendlyLastLogin() {
        console.log(this.lastLogin.toLocaleString());
    }
}

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

@Injectable({
    providedIn: 'root'
})
class MyService {
    constructor(private httpClient: HttpClient) { }

    getUser(): Observable<UserModel> {
        // Contract represents the data being returned from the external data source.
        return this.httpClient.get<UserContract>('my.totally.not.real.api.com')
            .pipe(
              map(contract => new UserModel(contract))
            );
    }
}

@Component({
    // bla bla
})
class MyComponent implements OnInit {
    constructor(private myService: MyService) { }

    ngOnInit() {
        this.myService.getUser().subscribe(x => {
            x.printFriendlyLastLogin(); // this works
            console.log(x.lastLogin.getFullYear()); // this works too
        });
    }
}

也许有点冗长，但它是我用来处理来自扁平后端合约的丰富前端模型的最强大和最灵活的模式。

原文由 UncleDave 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如@UncleDave 已经解释的那样，您只是将具有相应名称的值映射到 Typescript 对象，而不是使用它创建预期的类对象。这很令人困惑，我知道。

Object.assign() 将解决您当前的问题，但如果您有嵌套对象则不会。然后，您还必须为每个嵌套对象执行 Object.assign() ，如果您必须在代码库的多个位置执行此操作，这可能会变得乏味。

我建议一个替代方案： class-transformer 使用它，您可以使用注释标记嵌套字段，这些注释告诉编译器如何创建嵌套对象。有了这个，您只需要使用 plainToClass() 方法来映射您的顶级对象，所有基础字段也将具有正确的类型/对象。

例子

假设我们有两个类：

 class Parent {
    name: string;
    child: Child;

    public getText(): string {
        return 'parent text';
    }
}

class Child{
    name: string;

    public getText(): string {
        return 'child text';
    }
}

我们已经知道 的第一种情况 不起作用：

 let parentJson: any = {name: 'parent name', child: {name: 'child name'}};
let parent: Parent = parentJson; // note: compiler accepts this because parentJson is any.
        // If we tried to assign the json structure directly to 'parent' it would fail because the compiler knows that the method getText() is missing!

console.log(parent.getText()); // throws the error that parent.getText() is not a function as expected

第二种情况 使用 Object.assign() ：

 let parentJson: any = {name: 'parent name', child: {name: 'child name'}};
let parent: Parent = Object.assign(parentJson);

console.log(parent.getText()); // this works
console.log(parent.child.getText()); // throws error that parent.child.getText() is not a function!

为了使其工作，我们必须执行以下操作：

 let parentJson: any = {name: 'parent name', child: {name: 'child name'}};
let parent: Parent = Object.assign(parentJson);
parent.child = Object.assign(parentJson.child);

console.log(parent.getText()); // this works
console.log(parent.child.getText()); // this works

使用类转换器的 第三种情况：

首先修改父类，以便定义子映射：

 class Parent {
    name: string;
    @Type(() => Child)
    child: Child;

    public getText(): string {
        return 'parent text';
    }
}

然后你可以映射到父对象：

 let parentJson: any = {name: 'parent name', child: {name: 'child name'}};
let parent: Parent = plainToClass(Parent, parentJson);

console.log(parent.getText()); // this works
console.log(parent.child.getText()); // this works

原文由 Babyburger 发布，翻译遵循 CC BY-SA 4.0 许可协议