Angular 按键事件的第一个值未定义

Question

我正在为我的项目使用 Angular 11。在此项目中，尝试通过更改子组件输入字段中的值将值从子组件发送到父组件。

这里是子组件


@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

  name: string;

  constructor() { }

  ngOnInit(): void {
  }

  @Output() onChanged = new EventEmitter<boolean>();
  @Output() onChangedName = new EventEmitter<string>();

  change(increased: any) {
    this.onChanged.emit(increased);
  }

  changeName(name: string) {
    this.onChangedName.emit(name);
    console.log(this.name);
  }


}

child.component.html

<input type="text"
       [(ngModel)]="name"
       (keypress)="changeName(name)">

和父组件

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class AppComponent implements OnInit{
  clicks: number = 0;
  name: string;

  ngOnInit() {
  }

  onChanged(increased: any) {
    console.log(increased);
    increased === true ? this.clicks++ : this.clicks--;
  }

  onChangedName(name: string) {
    this.name = name;
  }
}

parent.component.html

<h3>{{name}}: name</h3>
<app-child
  (onChangedName)="onChangedName($event)"
  (onChanged)="onChanged($event)"></app-child>

我需要从子组件中发出值并在父组件中显示它，但它似乎工作不正常，因为第一个值是 'undefined' 并且在其余输入的名称之后少了一个字母。我该如何解决？

Answer 1

改为监听模型更改：

<input type="text"
   [(ngModel)]="name"
   (ngModelChange)="changeName(name)">

Angular 按键事件的第一个值未定义

Angular keypress event's first value is undefined

javascript

components

angular