javascript - 角度输出不起作用 - instance[output.propName].subscribe 不是函数
问题描述
我的@Output 或至少父组件中的事件有问题。父 HTML:
<h1>Accountmanagement</h1>
<button class="add" (click)="onAddEmployee()">Add Employee</button>
<table>
<tr>
<th>Username</th>
<th>E-Mail</th>
<th>Discord</th>
<th>First Name</th>
<th>Forum</th>
<th>Gitlab</th>
<th>Redmine</th>
<th>Gameserver</th>
<th>Docu-Server</th>
</tr>
</table>
<div class="overlay" *ngIf="showOverlay"></div>
<br>
<br>
<div class="interface" *ngIf="showOverlay">
<employee-dialog [employee]="employee" (end)="onEnd($event)"></employee-dialog>
</div>
家长 TS:
import { Component } from '@angular/core';
import { Employee } from '../../Dataclasses/Employee';
import { EmployeeDialog } from './EmployeeDialog/EmployeeDialog';
@Component({
selector: 'employee-list',
templateUrl: 'EmployeeList.html',
styleUrls: ["EmployeeList.css"]
})
export class EmployeeList {
employees: Employee[];
employee: Employee = new Employee();
showOverlay: boolean = false; //if the overlay and popup is shown
constructor() {
//intitialize employees (from DB)
}
onAddEmployee(): void {
this.showOverlay = true;
}
onEnd(empl: Employee) {
console.log("test");
}
}
儿童 TS:
import { Component, Inject, Input, Output } from '@angular/core';
import { Employee } from '../../../Dataclasses/Employee';
import { EventEmitter } from 'events';
@Component({
selector: 'employee-dialog',
templateUrl: 'EmployeeDialog.html',
styleUrls: ['EmployeeDialog.css']
})
export class EmployeeDialog {
@Input() employee: Employee;
@Output() end = new EventEmitter<Employee>();
private isNew: boolean = false; //wether the employee is a new created or not - important for the conrirmation buttons at the end
private cacheEmployee: Employee
public ngOnInit(): void {
if (this.employee.getUsername() == "") {
this.isNew = true;
}
this.cacheEmployee = this.employee;
}
public cancel(): void {
if (confirm("Do you want to discard all changes?")) {
this.end.emit(this.cacheEmployee);
}
}
public save(): void {
//send to DB here too
if (this.isNew) {
//create accounts
}
if (this.employee.checkData()) {
this.end.emit(this.employee);
}
}
}
重要的事情:我在 Parent-HTML 的以下行中收到错误:
<employee-dialog [employee]="employee" (end)="onEnd($event)"></employee-dialog>
错误日志:
EmployeeList.html:20 ERROR TypeError: instance[output.propName].subscribe is not a function
at createDirectiveInstance (core.js:12330)
at createViewNodes (core.js:13784)
at createEmbeddedView (core.js:13661)
at callWithDebugContext (core.js:15098)
at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:14410)
at TemplateRef_.createEmbeddedView (core.js:11736)
at ViewContainerRef_.createEmbeddedView (core.js:11448)
at NgIf._updateView (common.js:2845)
at NgIf.set [as ngIf] (common.js:2801)
at updateProp (core.js:12661)
View_EmployeeList_2 @ EmployeeList.html:20
EmployeeList.html:20 ERROR CONTEXT DebugContext_component: (...)componentRenderElement: (...)context: (...)elDef: {nodeIndex: 2, parent: {…}, renderParent: {…}, bindingIndex: 0, outputIndex: 0, …}bindingFlags: 0bindingIndex: 0bindings: Array(0)length: 0__proto__: Array(0)concat: ƒ concat()constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: ObjectcheckIndex: 2childCount: 1childFlags: 114688childMatchedQueries: 0directChildFlags: 114688element: {ns: "", name: "employee-dialog", attrs: Array(0), template: null, componentProvider: {…}, …}flags: 33554433matchedQueries: {}matchedQueryIds: 0ngContent: nullngContentIndex: nullnodeIndex: 2outputIndex: 0outputs: [{…}]parent: {nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}provider: nullquery: nullreferences: {}renderParent: {nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}text: null__proto__: ObjectelOrCompView: (...)elView: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: NgIfContext, …}component: EmployeeList {employee: Employee, showOverlay: true}context: NgIfContext {$implicit: true, ngIf: true}def: {factory: ƒ, nodeFlags: 33669123, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, …}disposables: (2) [ƒ, empty]initIndex: -1nodes: (5) [{…}, {…}, {…}, empty × 2]oldValues: [empty]parent: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: EmployeeList, …}parentNodeDef: {nodeIndex: 47, parent: null, renderParent: null, bindingIndex: 1, outputIndex: 1, …}renderer: DebugRenderer2 {delegate: EmulatedEncapsulationDomRenderer2, data: {…}}root: {ngModule: NgModuleRef_, injector: _NullInjector, projectableNodes: Array(0), selectorOrNode: "employee-list", sanitizer: DomSanitizerImpl, …}state: 13viewContainerParent: null__proto__: Objectinjector: (...)nodeDef: {nodeIndex: 3, parent: {…}, renderParent: {…}, bindingIndex: 0, outputIndex: 1, …}nodeIndex: 3providerTokens: (...)references: (...)renderNode: (...)view: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: NgIfContext, …}component: EmployeeList {employee: Employee, showOverlay: true}context: NgIfContext {$implicit: true, ngIf: true}def: {factory: ƒ, nodeFlags: 33669123, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, …}disposables: (2) [ƒ, empty]initIndex: -1nodes: (5) [{…}, {…}, {…}, empty × 2]oldValues: [empty]parent: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: EmployeeList, …}parentNodeDef: {nodeIndex: 47, parent: null, renderParent: null, bindingIndex: 1, outputIndex: 1, …}renderer: DebugRenderer2 {delegate: EmulatedEncapsulationDomRenderer2, data: {…}}root: {ngModule: NgModuleRef_, injector: _NullInjector, projectableNodes: Array(0), selectorOrNode: "employee-list", sanitizer: DomSanitizerImpl, …}state: 13viewContainerParent: null__proto__: Object__proto__: Object
View_EmployeeList_2 @ EmployeeList.html:20
我做错了什么?没有(end)="onEnd($event)"
一切工作......?我只想处理事件并获取通过 $events 传递的数据以在我的父类中使用它。感谢您的回答!
解决方案
您需要从EventEmitter
导入'@angular/core'
改变
import { EventEmitter } from 'events';
到
import { EventEmitter } from '@angular/core';
推荐阅读
- javascript - 为什么 nextImg 和 prevImg 不能设置元素的 src 属性?
- json - 在列表中查找 IndexOf 反序列化的 json 值
- java - Firestore 根据喜欢订购集合
- sharepoint - Sharepoint - 文档的外部存储
- c - char** 和结构的错误(null)
- php - 尝试在没有用户交互 PHP 的情况下从 Reddit 获取 OAuth2 身份验证令牌
- iis-8 - IIS8 通过 SNI 提供错误的证书
- r - 从数据框中提取两行 - r
- android - 在本机反应中同时使用双击和单击
- azure - 如何在 Azure Api 管理服务中管理用户帐户?