javascript - Angular 6: ERROR TypeError: "... is not a function" - 但它是
问题描述
我目前真的很困惑,因为我得到了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>
解决方案
原始答案
这是 Typescript 的常见问题,你说device
是 type Device
,但不是。它具有与 a 相同的所有属性Device
,但由于它不是 a 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
});
}
}
也许有点冗长,但它是我用来处理来自扁平后端合约的丰富前端模型的最强大和最灵活的模式。
推荐阅读
- node.js - Mongoose -- 当前的 URL 字符串解析器已被弃用,尽管传递了选项 { useNewUrlParser: true }
- database - 所有 AD 成员都执行查询时的 AD 查询性能
- sql - 根据其他表中的外键选择多行
- javascript - 如何使我的 ahref 链接动态化?用于创建动态 url 参数
- spring-boot - 如何在 Thymeleaf 中读取模型中设置的属性
- python-3.x - 如何在 Python 中使用 %s 和 %d 作为字符串文字而不是格式化程序?
- r - group_by 并使用 dplyr 应用基于窗口的滚动回归
- php - 如何将自定义字段值插入 Wordpress dynamic_sidebar
- reactjs - 从终端创建新的 React 应用程序时出错
- javascript - 检查元素是否在视口中并将其传递给函数