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

Question

I am learning angular from basic in my code I want to send text from text box on enter to function when I tried with just keyup keydown it was working fine but when try to use submit keyup.enter the whole component disappear

diagnos.component.html:

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

diagnos.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);
  }

}

idle page:

when used keyup only:

when used keyup.enter or submit after pressing enter or submitting:

after enter or submit whole component disappeared even that ul also and had tried logging on console if that function get call or not but that function doesn't call

my project link : https://github.com/ladbhupesh/angularapp

Answer 1

I have tried to repro your code and all seems well especially keyup.enter

Attached herewith is the Stackblitz Demo for your reference.

May I know if what's missing?

---

Update

Based on the provided Github link you mentioned, when looking at the running code, seems like the @Output EventEmitter affects your (keyup.enter) which I'm quite not sure what went through your project as I have only scanned fragments of your code but you can resolve that issue by supplying this code below:

AppComponent

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

What happened was, the event from DiagnosisComponent's keyup.enter was consoled or communicated on your AppComponent's changePage which it receives an object not string, resulting for the pageName to reinitialized it's value to the given object, thus, no components are being rendered and left your page empty as there are no pageName available for the given object.

You can check it out by performing console.log(val) inside your AppComponent's changePage(val) {...} function

Answer 2

This is how you trigger function with the enter key ,

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

not

(keyup.enter.p)

Answer 3

(keyup.enter) 在容器 div 中添加而不是在输入中时为我工作