Angular 4 - 获取输入值

Question

我想知道如何从角度4的输入中获取值.我查看了有关角度的文档,关键事件的示例对我来说效果不好,我找不到合适的示例如何这样做,请帮助我

问题:我尝试读取输入的值,然后将值提交给另一个组件,该组件将值添加到选择标记(例如,将人员的姓名发送到选择标记的列表)

Answer 1

<form (submit)="onSubmit()">
   <input [(ngModel)]="playerName">
</form>

let playerName: string;
onSubmit() {
  return this.playerName;
}

Answer 2

在HTML中添加

<input (keyup)="onKey($event)">

并在组件添加

onKey(event) {const inputValue = event.target.value;}

Answer 3

如果你不想使用双向数据绑定.你可以这样做.

在HTML中

<form (ngSubmit)="onSubmit($event)">
   <input name="player" value="Name">
</form>

在组件中

onSubmit(event: any) {
   return event.target.player.value;
}

Answer 4

I think you were planning to use Angular template reference variable based on your html template.

 // in html
 <input #nameInput type="text" class="form-control" placeholder=''/>

 // in add-player.ts file
 import { OnInit, ViewChild, ElementRef } from '@angular/core';

 export class AddPlayerComponent implements OnInit {
   @ViewChild('nameInput') nameInput: ElementRef;

   constructor() { }

   ngOnInit() { }

   addPlayer() {
     // you can access the input value via the following syntax.
     console.log('player name: ', this.nameInput.nativeElement.value);
   }
 }

Answer 5

您还可以使用模板引用变量

<form (submit)="onSubmit(player.value)">
   <input #player placeholder="player name">
</form>

onSubmit(playerName: string) {
  console.log(playerName)
}

Answer 6

您可以使用(keyup)或(change)事件，请参见下面的示例：

在 HTML 中：

<input (keyup)="change($event)">

或者

<input (change)="change($event)">

在组件中：

change(event) {console.log(event.target.value);}

Answer 7

如果您只想读取一个字段值，我认为使用模板引用变量是最简单的方法

模板

<input #phone placeholder="phone number" />

<input type="button" value="Call" (click)="callPhone(phone.value)" />

**Component** 
 
callPhone(phone): void 
{
  
console.log(phone);

}

如果您有多个字段，使用反应式表单是最好的方法之一。

Answer 8

html

<input type="hidden" #fondovalor value="valores">
     <button (click)="getFotoFondo()">Obtener</button>

ts

@ViewChild('fondovalor') fondovalor:ElementRef;

getFotoFondo(){ 
        const valueInput = this.fondovalor.nativeElement.value
}