Я создаю приложение Angular, которое ищет студентов из API. Он работает нормально, но вызывает API каждый раз, когда изменяется входное значение. Я провел исследование, в котором мне нужно что-то, называемое debounce, но я не знаю, как реализовать это в своем приложении.
App.component.html
<div class="container">
<h1 class="mt-5 mb-5 text-center">Student</h1>
<div class="form-group">
<input class="form-control form-control-lg" type="text" [(ngModel)]=q (keyup)=search() placeholder="Search student by id or firstname or lastname">
</div>
<hr>
<table class="table table-striped mt-5">
<thead class="thead-dark">
<tr>
<th scope="col" class="text-center" style="width: 10%;">ID</th>
<th scope="col" class="text-center" style="width: 30%;">Name</th>
<th scope="col" style="width: 30%;">E-mail</th>
<th scope="col" style="width: 30%;">Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let result of results">
<th scope="row">{{result.stu_id}}</th>
<td>{{result.stu_fname}} {{result.stu_lname}}</td>
<td>{{result.stu_email}}</td>
<td>{{result.stu_phonenumber}}</td>
</tr>
</tbody>
</table>
</div>
App.component.ts
import { Component} from '@angular/core';
import { Http,Response } from '@angular/http';
import { Subject, Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
results;
q = '';
constructor(private http:Http) {
}
search() {
this.http.get("https://www.example.com/search/?q="+this.q)
.subscribe(
(res:Response) => {
const studentResult = res.json();
console.log(studentResult);
if(studentResult.success) {
this.results = studentResult.data;
} else {
this.results = [];
}
}
)
}
}
Я пробовал что-то вроде этого, но это ошибка Свойство debounceTime не существует для типа Subject <{}>
mySubject = new Subject();
constructor(private http:Http) {
this.mySubject
.debounceTime(5000)
.subscribe(val => {
//do what you want
});
}
и это тоже не работает. Свойство 'fromEvent' не существует для типа 'typeof Observable'
Observable.fromEvent<KeyboardEvent>(this.getNativeElement(this.term), 'keyup')
Итак, как правильно это реализовать?
Спасибо.