typescript - 如何在角度2的输入文本变化时调用函数

标签 typescript angular2-template angular2-components

我想在文本框的输入更改时调用类型脚本函数,它对我有用。但它会在每次更改时调用,我想在文本框中的最小字符数为 5 时调用。

export class StudentMaintenanceComponent implements OnInit {
    @Component({
        selector: 'app-student-management',
        template: `<input placeholder="" class="form-control" type="text" [maxlength]="5" (input)="SearchData($event.target.value)">`,
        styleUrls: ['./app-student-management.css']
    })

    SearchData(_no: string) { // should be called when minimum no of character are 5 in the text field.
        console.log(_no);
    }
}

最佳答案

你可以这样写

(input)="$event.target.value.length > 5 && SearchData($event.target.value)"

你也可以像这样使用模板引用变量

<input placeholder="" #textInput class="form-control" type="text" [maxlength]="5" (input)="textInput.value.length > 5 && SearchData(textInput.value)">

关于typescript - 如何在角度2的输入文本变化时调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48083525/

相关文章:

JavaScript 构造函数调用

typescript ,单元测试 : Correct typing for Dispatching a Thunk with store. 从 redux-mock-store 发送

reactjs - 使用 props 有条件地设置样式组件中的属性,以使用 TypeScript 对主题对象进行索引?

angular - 如何将 Angular 2 RC 1(或更早版本)表单迁移到 Angular 2 RC 2/RC 4 新表单

angular - 如何从指令中观察服务内简单变量的变化?

typescript - 如何在 TypeScript 中实现 "ArrayLike"类?

Angular 2禁用清理

angular - 如何在 Angular 2 中动态加载和显示包含 routerLink 指令的 html?

angular2 将 ngModel 传递给子组件

angular - 如何在 Angular 2 中将方法从一个组件调用到另一个组件?