我正在开发一个angular应用程序,供经理们跟踪他们的团队,我遇到了一个@Output错误:

An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.

我有一个Meetings组件,生成MeetingItem组件的列表.我想在用户单击不同按钮时执行操作(编辑、删除、显示详细信息).

以下是我的家长会议模板:

<div class="meeting__list" [@newMeeting]="meetings.length">
  <app-meeting-item
    *ngFor="let meeting of meetings"
    [meeting]="meeting"
    (deleteMeeting)="deleteMeeting($event)"
    (openMeetingDialog)="openMeetingDialog($event)"
    (messageClick)="openMessage($event)"
  ></app-meeting-item>
</div>

My MeetingItem模板(仅此帖子涉及的部分):

<span class="meeting__actions">
    <mat-icon *ngIf="meeting.message" (click)="onMessageClick(meeting)" matTooltip="Read the message"
      matTooltipPosition="above" class="icon--notes">notes</mat-icon>
    <mat-icon (click)="onOpenMeetingDialog(meeting)" matTooltip="Edit this meeting" matTooltipPosition="above" class="icon--edit">edit</mat-icon>
    <mat-icon (click)="onDeleteMeeting(meeting.id)" matTooltip="Delete this meeting" matTooltipPosition="above" class="icon--delete">delete_outline</mat-icon>
  </span>

My MeetingItem组件:

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

@Component({
  selector: 'app-meeting-item',
  templateUrl: './meeting-item.component.html',
  styleUrls: ['./meeting-item.component.scss']
})
export class MeetingItemComponent {

  @Input() meeting;

  @Output() deleteMeeting = new EventEmitter();
  @Output() openMeetingDialog = new EventEmitter();
  @Output() messageClick = new EventEmitter();

  constructor() {}

  onDeleteMeeting(meetingId) {
    this.deleteMeeting.emit(meetingId);
  }

  onOpenMeetingDialog(meeting) {
    this.openMeetingDialog.emit(meeting);
  }

  onMessageClick(meeting) {
    this.messageClick.emit(meeting);
  }
}

推荐答案

为了让你的代码在stackblitz中运行,我必须替换

import { EventEmitter } from 'events';

使用

import { EventEmitter } from '@angular/core';

Angular相关问答推荐

首期日历发行

如何通过innerHtml在模板中显示动态插入的动感图标?

笔刷Angular 为17

使用jsPDF生成带有图像的PDF时出现灰色条纹

从Angular 前端访问ASP.NET Core 8 Web API时出现CORS错误

对REST后端的Angular/Priming过滤器请求导致无限循环

获取 Angular 中所有子集合 firestore 的列表

使用 Observable 进行渐进式填充

错误:在@angular/core中找不到导出ɵivyEnabled(导入为ɵivyEnabled)

PrimeNG:如何以编程方式更改分页器中的选定页面?

在 Angular material 表单元格中渲染 html

找不到模块'webpack'

ngx-toastr,Toast 未在 Angular 7 中显示

将 Angular 5 升级到 6 时,我得到不兼容的对等依赖(使用 ng update @angular/core)

Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name

Angular 4中的md-select中的onselected事件

Angular Material2 主题 - 如何设置应用程序背景?

ngIf - 判断后表达式已更改

如何在Angular2中判断ngIf中的变量类型

在 WebStorm 中的导入和大括号之间添加空格