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

Question

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

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);
           }
         });

      }
}

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

Answer 1

ng-change Angular 2+ 中不存在，因为这是 Angular 1.x 语法。 Event Binding 的语法看起来像 (change) , (input) ，和(click)仅举几例:

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

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

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

您还可以传递$event到模板中的函数以访问 HTML Event对于 value , target ，或您可能需要的任何其他内容。

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

这是一个简单的 example的(input)事件绑定(bind)正在运行，记录已传递的 $event发生的每个输入/更改。

希望有帮助!