Угловой вызов ng-change функции класса компонента не запускается - PullRequest
Новая
       18

Угловой вызов ng-change функции класса компонента не запускается

0 голосов
/ 24 апреля 2018

Я пытаюсь реализовать окно поиска в реальном времени с помощью 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);
           }
         });

      }
}

Поэтому я разместил консольный журнал там, чтобы увидеть, запускается ли он, не получая ничего.

1 Ответ

0 голосов
/ 24 апреля 2018

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 Event для value, target или чего-либо еще, что вам может понадобиться. 

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

Вот простой пример из (input) привязки события в действии, регистрирующий aпередано $event на каждый ввод / изменение, которое происходит.

Надеюсь, это поможет!

...