首页 文章

每个按键上的Angular 2更改事件

提问于
浏览 次
164

只有在输入焦点发生变化后才会调用change事件 . 我怎样才能使事件在每个按键上触发？

<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}

第二个绑定在每个按键btw上发生变化 .

angular

9 回答

  • 2

    我刚刚使用了事件输入，它的工作原理如下：

    在.html文件中：

    <input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

    在.ts文件中：

    onSearchChange(searchValue : string ) {  
console.log(searchValue);}
    回复于
  • 12

    使用 ngModelChange 将 [(x)] 语法分解为两部分，即属性数据绑定和事件绑定：

    <input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}

    valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}

    它也适用于退格键 .

    回复于
  • 2

    （keyup）事件是你最好的选择 .

    让我们看看为什么：

    • (change) 就像你提到的只有当输入失去焦点时触发，因此用途有限 .
      按键时会触发
    • (keypress) ，但在某些击键时不会触发，例如退格键 .
      每次按下一个键时都会触发
    • (keydown) . 因此总是滞后1个字符;因为它在按键被注册之前获得了元素状态 .
      每次键推送事件完成时都会触发
    • (keyup) ，因此这也包括最新的字符 .

    所以（keyup）是最安全的，因为它......

    • 在每次击键时注册一个事件，与（更改）事件不同
      与（keydown）事件不同，

    • 没有延迟

    • 包括（按键）忽略的键

    回复于
  • 37
    <input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}
    回复于
  • 275

    保持角度ngModel同步的秘密事件是事件调用 input . 因此，您问题的最佳答案应该是：

    <input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
    回复于
  • 34

    处理此类情况的另一种方法是使用formControl并在初始化组件时订阅它 valueChanges ，这将允许您使用 rxjs 运算符来执行高级要求，例如执行http请求，应用debounce直到用户完成写句子，取最后一个 Value 并省略以前，......

    import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}
    回复于
  • 16
    <input type="text" (keypress)="myMethod(myInput.value)" #myInput />

    档案.ts

    myMethod(value:string){
...
...
}
    回复于
  • 4

    你在寻找什么

    <input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}

    然后通过访问.ts文件中的绑定 this.mymodel ，对数据执行任何操作 .

    回复于
  • 167

    就我而言，解决方案是：

    [ngModel]="X?.Y" (ngModelChange)="X.Y=$event"
    回复于

相关问题