TypeError: ctx.onCreditChange 不是函数角度答案

【问题标题】：TypeError: ctx.onCreditChange is not a function angularTypeError: ctx.onCreditChange 不是函数角度
【发布时间】：2020-09-25 05:19:34
【问题描述】：

我有两个组件。组件 A 是父组件，组件 B 是子组件。组件 A 如下所示：

A.html

    <nb-box [onCreditChange]="onCreditChange"></nb-box>

A.ts

onCreditChange($event) { console.log($event) }

组件A的功能转移到B。

组件 B 如下所示

B.html

<div class="box">
 <nb-switch  (onChange)="onCreditChange($event)"></nb-switch>

</div>

B.ts（该组件的一部分）

import { Component, Input, NgModule, EventEmitter, Output} from '@angular/core';

export class Box extends BoxBase {
  @Output() onCreditChange: EventEmitter<any> = new EventEmitter()

}

调用函数时出错

core.js:6241 ERROR TypeError: ctx.onChange is not a function

你知道怎么解决吗？

【问题讨论】：

不应该这样：[onCreditChange]="onCreditChange" 是这样的：(onCreditChange)="onCreditChange" 吗？
@MikeOne 我改变了但我得到了新的错误：这个表达式是不可调用的。类型“EventEmitter”没有调用签名。

标签： javascript angular

【解决方案1】：

父组件

HTML

<nb-box (onCreditChange)="onCreditChange"></nb-box>

onCreditChange($event) { console.log($event) }

子组件

错误从这里开始，因为输出不是一个函数，它是一个允许您向父级发送事件的对象。您需要在子函数中执行一个函数，并在该函数的内部使用输出对象发出。

HTML

<div class="box">
 <nb-switch  (onChange)="onChangeInChild($event)"></nb-switch>

</div>

import { Component, Input, NgModule, EventEmitter, Output} from '@angular/core';

export class Box extends BoxBase {
  @Output() onCreditChange = new EventEmitter<any>()

  onChangeInChild(eventObject: any){
      this.onCreditChange.emit(eventObject)
  }
}

【讨论】：