Angular не может передать пользовательский ввод в машинописный текст из html

Question

HTML

<input #box (keyup.enter)="Character(box.value)"/>

машинопись

Character(value: string) {
  console.log("print this " + value);
}

Я подтвердил код машинописи в двух разных местах в сети и получил html-код из другого ответа здесь, и хотя функция машинописи выполняет «значение», он просто не будет выводиться на консоль. Я даже поменял тему браузера, думая, что это мешает в какой-то момент. (поскольку он меняет цвет текстовых полей и некоторых других сайтов, текст сливается с полем)

Обновление Как вы можете понять из выбранного ответа, я не осознавал, что моя проблема заключалась в том, что у меня было два текстовых поля, которые вызывали проблему, потому что значение не просто передавалось обоим, как я предполагал .

Answer 1

Это работает как ожидалось:

См .: https://stackblitz.com/edit/angular-jcrcdu?file=src%2Fapp%2Fapp.component.html

app.component.html

<input #box (keyup.enter)="Character(box.value)"/>

<p>{{box1name}}</p>




<input #box2 (keyup.enter)="onEnter(box2.value)"/>

<p>{{box2name}}</p>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  box1name = 'Angular';
  box2name = 'Angular2';

  Character(value: string) {
  this.box1name="print this for box1 :" + value;
  console.log(this.box1name);
}

  onEnter(value: string) {
  this.box2name="print this for box2: " + value;
  console.log(this.onEnter);
}


}

Answer 2

что вы можете сделать, это обернуть ввод в тег формы, например:

<form (ngSubmit)="submit()">
    <input type="text" [(ngModel)]="name" name="name">
</form>

В машинописном тексте:

name = '';
submit() {
  console.log(this.name);
}