angular - 提交，keyup.enter 不适用于 Angular 10

Question

我在我的代码中从基础学习 Angular 我想从 enter 上的文本框发送文本当我尝试使用 keyup 时可以正常运行keydown它工作正常但是当尝试使用 submit 时keyup.enter整个组件消失

诊断.component.html:

<input type="text" #nameText (keyup.enter)="addItem(nameText.value)">
<ul>
  <li *ngFor="let name of names">{{name}}</li>
</ul>

诊断.component.ts:

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

@Component({
  selector: 'app-diagnos',
  templateUrl: './diagnos.component.html',
  styleUrls: ['./diagnos.component.css']
})
export class DiagnosComponent implements OnInit {
  names = ['abc','xyz'];
  constructor() { }
  ngOnInit(): void {
    
  }
  addItem(val){
    this.names.push(val);
  }

}

空闲页面:

使用时keyup只要:

使用时keyup.enter或 submit按 enter 后或提交:

输入或提交后，整个组件甚至消失了 ul也曾尝试登录控制台，如果该函数被调用或不被调用，但该函数没有调用

我的项目链接:https://github.com/ladbhupesh/angularapp

Answer 1

我已尝试重现您的代码，一切似乎都很好，尤其是 keyup.enter

随函附上 Stackblitz Demo供大家引用。

我可以知道是否缺少什么吗？

---

更新

根据您提到的提供的 Github 链接，在查看运行代码时，似乎 @Output EventEmitter 影响了您的 (keyup.enter) 我是非常不确定您的项目经历了什么，因为我只扫描了您的代码片段，但您可以通过提供以下代码来解决该问题:

应用组件

...
changePage(val) {
  if (typeof val === 'string') this.pageName = val;
}

发生的事情是，来自 DiagnosisComponent 的 keyup.enter 的事件在您的 AppComponent 的 changePage 上得到控制或传达，它收到一个对象而不是字符串，导致 pageName 重新初始化给定对象的值，因此，不会呈现任何组件并使您的页面留空，因为没有可用于给定对象的 pageName。

您可以通过在 AppComponent 的 changePage(val) {...} 函数中执行 console.log(val) 来检查它