为什么会出现错误TypeError:“ xyz”不是函数?

时间:2019-11-01 19:40:32

标签: javascript angular typescript

我有以下代码:

MatchComponent

import { AllData } from './../../data-handling/all.data';
import { MatchService } from '../../data-handling/match.service';
import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { Match } from '../../data-handling/match';


@Component({
  selector: 'app-match',
  templateUrl: './match.component.html',
  styleUrls: ['./match.component.css']
})
export class MatchComponent implements OnInit {

  match: Match;

  constructor(private matchService: MatchService) { }

  ngOnInit() {
  }

  // ...
  loadMatch(): void {
    console.log(AllData.allMatches);
    this.match = AllData.allMatches[0];
    console.log(this.match);
  }

  getGame(match: Match): string {
    console.log('getGame');
    console.log(match); // prints the expected output (match object exists)
    match.getGameFromAll();
    return 'test';
  }
  // ...
}

匹配

export class Match {
    // ...

    public getGameFromAll(): void {
        console.log('XXXXXXXXXXX');
    }

    // ...
}

AllData:

import { Match } from './match';

export class AllData {
    static allMatches: Match[];
}

和html模板:

<button (click)="loadMatch()">Load Match</button>
<!-- ... -->
<div *ngIf="match">
    <h4> {{getGame(match)}} </h4>
</div>
<!-- ... -->

我正在将所有带有http的匹配项加载到allMatches数组中。这样可行。之后,我按下触发操作的“加载匹配”按钮,将单个匹配项加载到MatchComponent中。从控制台输出判断也可以。

当match对象存在时,在MatchComponent中调用getGame函数。据我了解,运行代码后,实际上应该在网站上出现文本“ test”。但是在控制台中打印“ getGame”后,显示以下内容:

ERROR TypeError: match.getGameFromAll is not a function

这很可能是一个简单的问题,但是老实说,我不能理解为什么不能调用getGameFromAll吗?

1 个答案:

答案 0 :(得分:2)

您的问题似乎很简单。您将从http调用中获取不是原型对象的json对象,因此没有在其中实现方法。

就变量名而言,JSON对象具有相同的成员,但没有构造函数,方法等。

如果您使用的是可观察的对象,那么您将需要将JSON对象转换为Prototype对象,并在您订阅http GET请求的地方返回结果。

您可以查看此答案here