[解決済み] エラーが発生しました。出力が初期化されていません
2022-04-23 16:17:03
質問
管理職がチームを把握するためのangularアプリに取り組んでいますが、@Outputエラーで行き詰っています。
An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.
MeetingItemコンポーネントのリストを生成するMeetingsコンポーネントを持っています。ユーザーが異なるボタン(編集、削除、詳細表示)をクリックしたときにアクションを実行したい。
以下は、親となるMeetingsテンプレートです。
<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>
私の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>
私の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);
}
}
解決方法は?
で動作するようにするには スタックブリッツ というように置き換える必要がありました。
import { EventEmitter } from 'events';
と
import { EventEmitter } from '@angular/core';
関連
-
[解決済み] ルーターリンク]と[ルーターリンク]の違いについて
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular 4 HttpClient クエリパラメータ
-
[解決済み] Angular HttpClient "パース中のHttp失敗"
-
[解決済み] エクスポートされた2つのクラスを同じ名前でインポートする
-
[解決済み] index.tsは何に使われているのですか?
-
[解決済み] Angularチュートリアルのpipeメソッドとtapメソッドとは何ですか?
-
[解決済み] 複数のng-content
-
[解決済み] VSCodeでAngularをデバッグする方法とは?
-
[解決済み] Angular 2のテンプレートでlet-*とは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] Angularの@Directiveと@Componentの比較
-
[解決済み] ngIf」は「div」の既知のプロパティではないため、バインドできない [重複] 。
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み] Angular CLI SASSオプション
-
[解決済み] テンプレート駆動型とリアクティブ型の実用的な違いとは?
-
[解決済み] AngularのINPUT要素でngModel内のパイプを使用する
-
[解決済み] prodのバンドルサイズを小さくするには?
-
[解決済み] index.tsは何に使われているのですか?
-
[解決済み] VSCodeでAngularをデバッグする方法とは?