Angular 如何正确发出从表单获取数据到父组件的事件

Question

在子组件的表单中发生值更改时，我试图使用表单中更改的数据向父组件发送一个事件，但它一直告诉我

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

export class ClaimItemBoxesComponent implements OnInit {
 @Output() updatedBoxData = new EventEmitter();
 ngOnInit(): void {
    this.items.valueChanges.subscribe(this.onBoxFormChage);
 }
 onBoxFormChage(item) {
   this.updatedBoxData.emit(item) // Cannot read properties of undefined (reading 'updatedBoxData')
 }
}

如果我在订阅外部的 ngOnInit 中发出事件，它会正常工作，但如果在订阅内部则不会。

Answer 1

你在这里丢失了上下文，绑定它，或者使用lambda函数：

ngOnInit(): void {
    this.items.valueChanges.subscribe(this.onBoxFormChage.bind(this));
}

或

ngOnInit(): void {
    this.items.valueChanges.subscribe((value) => this.onBoxFormChage(value));
}

Angular 如何正确发出从表单获取数据到父组件的事件

How to correctly emit an event that takes data from a form to the parent component in Angular

angular

angular-material

angular-event-emitter