Angular ng-change 调用组件 Class 函数未触发

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)" />

您需要改用事件绑定 (input) 来跟踪 <input /> 类型 text 的 input/change 事件：

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

您还可以将 $event 传递给模板中的函数，以获得对 value、target 或任何内容的 HTML Event 的访问权限否则你可能需要。

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

这是一个简单的 example 的 (input) 事件绑定操作，在发生的每个 input/change 上记录通过的 $event。

希望对您有所帮助！

Angular ng-change 调用组件 Class 函数未触发

Angular ng-change call to a Component Class function not triggering

javascript

angular

angularjs-ng-change