提交，keyup.enter 不適用於 Angular 10

Question

我正在我的代碼中從基本學習角度我想在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或按enter或submit后提交時：

在輸入或提交整個組件后，即使那個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's keyup.enter的事件在您的AppComponent's changePage上進行了AppComponent's changePage或通信，它接收一個對象而不是字符串，導致pageName將其值重新初始化為給定的對象，因此，沒有組件正在呈現並離開您的頁面為空，因為給定對象沒有可用的pageName 。

您可以通過在AppComponent's changePage(val) {...} function執行console.log(val)來檢查它

Answer 2

這就是你用回車鍵觸發功能的方式，

 <input type="text" (keyup.enter)="function()">

不是

(keyup.enter.p)

Answer 3

(keyup.enter) 在容器 div 中添加而不是在輸入中時為我工作