我想知道如何从角度 4 的输入中获取值。 我查看了有关 angular 的文档，并且带有关键事件的示例对我来说效果不佳，我找不到合适的示例如何执行此操作，因此请帮助我
问题： 我尝试读取输入的值，然后将值提交给另一个组件，该组件会将值添加到选择标签（例如，将人名发送到选择标签的列表）
【问题讨论】：
标签： angular input components
<form (submit)="onSubmit()">
<input [(ngModel)]="playerName">
</form>
let playerName: string;
onSubmit() {
return this.playerName;
}
【讨论】：
在 HTML 中添加
<input (keyup)="onKey($event)">
并在组件中添加
onKey(event) {const inputValue = event.target.value;}
【讨论】：
如果您不想使用双向数据绑定。你可以这样做。
在 HTML 中
<form (ngSubmit)="onSubmit($event)">
<input name="player" value="Name">
</form>
在组件中
onSubmit(event: any) {
return event.target.player.value;
}
【讨论】：
html
<input type="hidden" #fondovalor value="valores">
<button (click)="getFotoFondo()">Obtener</button>
ts
@ViewChild('fondovalor') fondovalor:ElementRef;
getFotoFondo(){
const valueInput = this.fondovalor.nativeElement.value
}
【讨论】：
你也可以使用template reference variables
<form (submit)="onSubmit(player.value)">
<input #player placeholder="player name">
</form>
onSubmit(playerName: string) {
console.log(playerName)
}
【讨论】：
我认为您打算根据您的 html 模板使用 Angular template reference variable。
// 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);
}
}
【讨论】：
您可以使用(keyup) 或(change) 事件，请参见下面的示例：
在 HTML 中：
<input (keyup)="change($event)">
或者
<input (change)="change($event)">
在组件中：
change(event) {console.log(event.target.value);}
【讨论】：
如果你只想读取一个字段值，我认为，使用模板引用变量是最简单的方法
模板
<input #phone placeholder="phone number" />
<input type="button" value="Call" (click)="callPhone(phone.value)" />
**Component**
callPhone(phone): void
{
console.log(phone);
}
如果您有多个字段，使用响应式表单是最好的方法之一。
【讨论】：
HTML 组件
TS 组件
public txtValue = new FormControl('', { validators:[Validators.required] });
我们可以通过 API 使用这种方法来保存。 LModules 是我们 Angular 文件中的模块文件 SaveSampleExams是服务文件的一种功能方法。
> this.service.SaveSampleExams(LModules).subscribe(
> (data) => {
> this.dataSaved = true;
> LearnersModules.txtValue = this.txtValue.value;
> });
【讨论】：
在 Angular 11 中，如果您的模板设置为具有包含 input 标记的 form 标记，并且还存在一个可以单击的 button，则以下代码显示如何提醒input 标签的值通过双向数据绑定：
app.component.html:
<form>
<input [(ngModel)]="example" name="example">
<button (click)="alert()">Alert</button>
</form>
app.component.ts:
example: string;
alert() {
alert(this.example);
}
请注意，模板中的name 属性在此处是必需的，否则您将在开发者控制台中收到一条错误消息，内容如下：
Error: If ngModel is used within a form tag, either the name attribute must be set or the form
control must be defined as 'standalone' in ngModelOptions.
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
【讨论】：