webentwicklung-frage-antwort-db.com.de

Implementieren einer Entprellzeit in einem Keyup-Ereignis in Angular 6

Ich erstelle eine Angular-App, die Studenten über die API sucht. Es funktioniert gut, ruft jedoch jedes Mal die API auf, wenn ein Eingabewert geändert wird. Ich habe nachgeforscht, dass ich etwas namens Debounce brauche, aber ich weiß nicht, wie ich das in meiner App implementieren kann.

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 = [];
          }
      }
    )
  }
}

Bildschirmfoto Screenshot

Ich habe so etwas ausprobiert, aber es ist ein Fehler Die Eigenschaft debounceTime ist für den Typ Subject <{}> nicht vorhanden

  mySubject = new Subject();
  constructor(private http:Http)  {
    this.mySubject
    .debounceTime(5000)
    .subscribe(val => {
      //do what you want
    });
  }

und das geht auch nicht. Eigenschaft 'fromEvent' ist bei Typ 'typeof Observable' nicht vorhanden 

    Observable.fromEvent<KeyboardEvent>(this.getNativeElement(this.term), 'keyup')

Was ist also der richtige Weg, dies umzusetzen? 

Vielen Dank.

13
user6770140

In der Komponente können Sie so etwas tun. Erstellen Sie RxJS Subject, Führen Sie in der search-Methode, die für das keyup-Ereignis aufgerufen wird, .next() für diese von Ihnen erstellte Subject aus. Dann wird subscribe in ngOnInit() für 1 Sekunde debounce, wie im folgenden Code.

searchTextChanged = new Subject<string>();
constructor(private http:Http) {

}


ngOnInit(): void {
    this.subscription = this.searchTextChanged
        .debounceTime(1000)
        .distinctUntilChanged()
        .mergeMap(search => this.getValues())
        .subscribe(() => { });
}

getValues() {
    return this.http.get("https://www.example.com/search/?q="+this.q)
    .map(
      (res:Response) => {
          const studentResult = res.json();
          console.log(studentResult);
          if(studentResult.success) {
            this.results = studentResult.data;
          } else {
            this.results = [];
          }
      }
    )
}

search($event) {
    this.searchTextChanged.next($event.target.value);
}

rxjs v6 enthält einige grundlegende Änderungen, einschließlich der Vereinfachung von Importpunkten für Bediener. Versuchen Sie, rxjs-compat zu installieren, wodurch diese Importpfade so lange hinzugefügt werden, bis der Code migriert wurde.

Importieren Sie die erforderlichen Operatoren aus RxJS. Die folgenden sind für RxJS 5.x

import { Subject } from "rxjs/Subject";
import "rxjs/add/operator/debounceTime";
import "rxjs/add/operator/distinctUntilChanged";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/mergeMap";
6

Wenn Sie Winkel 6 und Rxjs 6 verwenden, versuchen Sie Folgendes:
Beachten Sie die .pipe(debounceTime(1000)) vor Ihrer subscribe 

import { debounceTime } from 'rxjs/operators';


search() {
    this.http.get("https://www.example.com/search/?q="+this.q)
    .pipe(debounceTime(1000))
    .subscribe(
      (res:Response) => {
          const studentResult = res.json();
          console.log(studentResult);
          if(studentResult.success) {
            this.results = studentResult.data;
          } else {
            this.results = [];
          }
      }
    )
  }
2
Nadhir Falta

Sie können auch angle formControls verwenden, um das Eingabesuchfeld zu binden 

<input  class="form-control form-control-lg" 
type="text" [formControl]="searchField"
placeholder="Search student by id or firstname or lastname">

und verwenden Sie valueChanges observable in unserem searchField, um auf Änderungen des Suchfelds in Ihrer App.component.ts -Datei zu reagieren.

searchField: FormControl; 

ngOnInit() {
    this.searchField.valueChanges
      .debounceTime(5000) 
      .subscribe(term => {
    // call your service endpoint.
      });
}

optional können Sie distinctUntilChanged verwenden (das nur in seinem Ausgabestrom veröffentlicht wird, wenn der veröffentlichte Wert vom vorherigen Wert abweicht).

searchField: FormControl; 

ngOnInit() {
    this.searchField.valueChanges
      .debounceTime(5000) 
     .distinctUntilChanged()
     .subscribe(term => {
            // call your service endpoint.
      });
}
2

Für alle, die in einer neueren Version von angle (und rxjs) auf dieses Problem stoßen.

Die neuen Rxjs verfügen über Pipeable-Operatoren, und sie können auf diese Weise verwendet werden (vom akzeptierten Antwortcode)

ngOnInit() {
 this.subscription = this.searchTextChanged.pipe(
   debounceTime(1000),
   distinctUntilChanged(),
   mergeMap(search => this.getValues())
  ).subscribe((res) => {
    console.log(res);
  });
1
Pautomagi

Demo Link

Tutorial Source Link

enter image description here

Template-Variable verwenden

<input type="text" #movieSearchInput class="form-control" placeholder="Type any movie name" />

    ...
    ...    
        fromEvent(this.movieSearchInput.nativeElement, 'keyup').pipe(
        // get value
        map((event: any) => {
            return event.target.value;
        })
        // if character length greater then 2
        ,filter(res => res.length > 2)
        // Time in milliseconds between key events
        ,debounceTime(1000)        
        // If previous query is diffent from current   
        ,distinctUntilChanged()
        // subscription for response
        ).subscribe((text: string) => {
            this.isSearching = true;
            this.searchGetCall(text).subscribe((res)=>{
            console.log('res',res);
            this.isSearching = false;
            this.apiResponse = res;
            },(err)=>{
            this.isSearching = false;
            console.log('error',err);
            });
        });
    ...
    ...
0
Code Spy

user.component.html

   <input type="text" #userNameRef class="form-control"  name="userName" >  <!-- template-driven -->
 <form [formGroup]="regiForm"> 
      email: <input formControlName="emailId"> <!-- formControl -->
    </form>

user.component.ts

       import { fromEvent } from 'rxjs';
       import { switchMap,debounceTime, map } from 'rxjs/operators';


        @Component({
          selector: 'app-user',
          templateUrl: './user.component.html',
          styleUrls: ['./user.component.css']
        })
        export class UserComponent implements OnInit {

          constructor(private userService : UserService) { }


             @ViewChild('userNameRef') userNameRef : ElementRef;

             emailId = new FormControl(); 
   regiForm: FormGroup = this.formBuilder.group({
      emailId: this.bookId
   });   

             ngOnInit() {

                    fromEvent(this.userNameRef.nativeElement,"keyup").pipe(
                    debounceTime(3000),
                    map((userName : any) =>userName.target.value )
                  ).subscribe(res =>{
                    console.log("User Name is :"+ res);

                  } );
    //--------------For HTTP Call------------------

                  fromEvent(this.userNameRef.nativeElement,"keyup").pipe(
                    debounceTime(3000),
                    switchMap((userName : any) =>{
                   return this.userService.search(userName.target.value)
                 })
                  ).subscribe(res =>{
                    console.log("User Name is :"+ res);

                  } );



----------
                // For formControl 

                  this.emailId.valueChanges.pipe(
                  debounceTime(3000),
                  switchMap(emailid => {
                         console.log(emailid);
                        return this.userService.search(emailid);
                        })
                         ).subscribe(res => {
                               console.log(res);
                                    });


            }

* Hinweis: Stellen Sie sicher, dass Ihr Eingabeelement nicht im Block ngIf vorhanden ist.

0
SHIVA