时间戳

首页 > 解决方案 > 对组件类函数的角度 ng-change 调用未触发

javascript - 对组件类函数的角度 ng-change 调用未触发

问题描述

我正在尝试使用 ng-change 以角度实现实时搜索框，但我传递的函数似乎没有触发。代码如下

HTML

<input type="text" 
  [(ngModel)]="searchTerm" 
  ng-change="updateSearch()"
  name="firstname" 
  placeholder="Search Courses, Challenges, Datasets...">

Javascript

export class SearchbarComponent implements OnInit {

  results = RESULTS;
  filteredResults: SearchResult[];

  searchTerm: string;

  constructor() { }

  ngOnInit() {
    this.filteredResults = this.results.slice();
  }

  updateSearch():void {
    console.log("fish");
    this.filteredResults = [];

     this.results.forEach(function(element) {
       if (element.startsWith(this.searchTerm)) {
         this.filteredResults.append(element);
       }
     });

  }
updateSearch():void {
        console.log("fish");
        this.filteredResults = [];

         this.results.forEach(function(element) {
           if (element.startsWith(this.searchTerm)) {
             this.filteredResults.append(element);
           }
         });

      }
}

所以我把控制台日志放在那里看它是否正在触发，没有得到任何东西。

标签： javascriptangularangularjs-ng-change

解决方案

ng-change在 Angular 2+ 中不存在，因为那是 Angular 1.x 语法。事件绑定的语法类似于(change), (input),(click)等等：

<input type="text" [(ngModel)]="someVar" (input)="someHandler($event)" />

您需要改为使用事件绑定(input)来跟踪<input />类型的输入/更改事件text：

<input type="text" 
    [(ngModel)]="searchTerm" 
    (input)="updateSearch()"
    name="firstname" 
    placeholder="Search Courses, Challenges, Datasets..." />

您还可以传递$event给模板中的函数，以获取对、或您可能需要的任何其他内容的 HTML事件的访问权限。valuetarget

<input (input)="updateSearch($event)" />

这是一个简单的事件绑定示例，记录每个发生的输入/更改时传递的 a。(input)$event

希望这会有所帮助！

推荐阅读