Angular5: ngOnChanges вызывается довольно медленно

Question

Я использую Angular 5. У меня есть простой родительский компонент и дочерний компонент.Из родительского компонента я передаю searchTerm дочернему компоненту.Дочерний компонент использует текст searchTerm для поиска и отображения результатов в таблице.Однако все работает отлично.NgOnChanges вызывается примерно через 15 секунд после ввода searchTerm в поле поиска.Нет активности на консоли или в сети.Я не уверен, почему ngOnChanges вызывается так поздно.После его вызова через 15 секунд поиск работает и результаты отображаются очень быстро.На этой же странице я использую подключение к веб-сокету для отображения уведомлений.Я попытался закомментировать код, который делает подключение к веб-сокету.Однако даже после этого поиск довольно медленный.Пожалуйста, дайте мне знать, если у вас есть какие-либо идеи.

import { Component, TemplateRef, OnInit,Input,OnChanges, OnDestroy } from '@angular/core';
import { NgModule } from '@angular/core';
//import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
//import * as Query from '../global-query';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
//import { DataService } from '../core/data.service';
//import { Subscription } from 'rxjs/Subscription';
//import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { ServerResponse } from '../shared/interfaces';
import { Data , CategoryData } from '../shared/interfaces';
import { Category } from '../category';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';
import { StompService } from 'ng2-stomp-service';
import { Subscription } from 'rxjs';


@Component({
  selector: 'app-application',
  templateUrl: './application.component.html',
  styleUrls: ['./application.component.scss']
})

export class ApplicationComponent implements OnInit, OnChanges {
  @Input() searchTerm: String;
  modalRef: BsModalRef;
  applications: Array<any> = []; // List of Applications
  //applications: any;
  application: any = {};
  temp_app: any = {};
  name: any;
  owner: any;
  app_status: any;
  category: any;    
  stockQuote: number; 
  sub: Subscription;  
  categories: Array<any> = []; // List of Categories
  subscription: Subscription = null;
  connected = false;
  greetings = new Array<string>();
  notification: string;
  errorMessage : string;
  //baseUrlWebSocket: string = 'http://192.168.99.101:8090';
  //baseUrl: string = 'http://192.168.99.101:5000';
  baseUrlWebSocket: string = 'http://localhost:8090';
  baseUrl: string = 'http://localhost:5000';


  constructor(//private apollo: Apollo,
    private modalService: BsModalService//,private dataService: DataService//) { }
    ,private http: HttpClient, private router: Router,// private route: ActivatedRoute,
     private stomp: StompService) {
      console.log('stomp configure');
        //stomp.configure({host: 'http://localhost:8090/ws', queue: ''
        stomp.configure({host: this.baseUrlWebSocket+'/ws', queue: ''        
         //debug:false,
        //queue:{'init':false}
      });
      console.log('stomp configure complete');
     }

  ngOnInit() {
    console.log('ngOnInit');
    console.log('searchTerm');
    console.log(this.searchTerm.toUpperCase());
    this.getCategories('');
    console.log(this.categories);
    this.getApplications(this.searchTerm.toUpperCase());
    /*this.sub = this.dataService.getQuotes()
          .subscribe(quote => {
        //console.log('quote');
        //console.log(quote);           
            this.stockQuote = quote;
    });*/
    this.connect();
    console.log('Connected to Web Socket');

  }

  ngOnChanges() {
   // setTimeout(() => {
      console.log('ngOnChanges');
      console.log(this.searchTerm.toUpperCase());    
      //this.getCategories('');
      this.getApplications(this.searchTerm.toUpperCase());
      console.log('ngOnChanges complete');
      //}, 0);

  }  

  ngOnDestroy() {
    //this.sub.unsubscribe();
    console.log('disconnect');
    this.disconnect();
    console.log('disconnect complete');
  }   


  connect() {
    this.stomp.startConnect().then(() => {
      this.connected = true;
      console.log('connected');

      // there appears to be a bug in stomp-service which means the promise is
      // resolved before the connection state is properly changed
      setTimeout(() => {

        this.subscription =
          this.stomp.subscribe('/topic/ads',
            (data) => {
              console.log(data);
              this.notification = data.content;

            }
          );
      }, 50);
      console.log('subscribed');
    });
  }

  disconnect() {
    this.subscription.unsubscribe();
    this.stomp.disconnect().then(() => {
      console.log('disconnected');
      this.connected = false;
    });
  }

  sendName(name: string) {
    this.stomp.send('/app/hello', {'name': name});
  }

  /**
   * Create Application
   * @param nameValue     Name of Application
   * @param ownerValue     Owner of Application
   * @param app_statusValue     Status of Application
   * @param categoryValue     Category of Application
   */
  createApplication(nameValue,ownerValue,app_statusValue,categoryValue) {

    console.log('createApplication');

    //console.log(this.application["name"] +" "+ this.application["owner"]+" "+this.application["app_status"]+" "+this.application["category"]);
    this.temp_app["name"] = nameValue.toUpperCase();
    this.temp_app["owner"] = ownerValue.toUpperCase();
    this.temp_app["app_status"] = app_statusValue.toUpperCase();

    console.log(categoryValue);
    let categoryItem = this.categories.find(i => i.name == categoryValue);
    console.log(this.categories.find(i => i.name == categoryValue));


    var cat = new Category();
    cat.id = categoryItem.id;
    cat.name = categoryItem.name
    var x: Category[] = [
      cat
  ];
  console.log(x);
  this.temp_app["category"] = x;
    //this.http.post<ServerResponse>('http://localhost:5000/api/app/',this.temp_app)
    this.http.post<ServerResponse>(this.baseUrl+'/api/app/',this.temp_app)
      .subscribe(res => {
          //let id = res['id'];
          console.log(res);
          this.applications = (<Data>res.data).applications;               
          this.router.navigate(['/applications']);
          //this.router.navigate(['/applications']);
          this.closeFirstModal();
        }, (err) => {
          console.log(err.error.message);
          this.errorMessage = err.error.message;

        }
      );    
  }



  /**
   * Remove Application
   * @param id 
   */
  removeApplication(id) {
    //this.http.delete<ServerResponse>('http://localhost:5000/api/app/'+id)
    this.http.delete<ServerResponse>(this.baseUrl+'/api/app/'+id)
    .subscribe(res => {
        console.log(res);
        this.applications = (<Data>res.data).applications;               
        this.router.navigate(['/applications']);
      }, (err) => {
        console.log(err.error.message);
        this.errorMessage = err.error.message;
      }
    );
  }


  /**
   * Edit Application Form
   * @param application 
   * @param template 
   */
  showEditApplicationForm(application, template) {
    this.errorMessage = '';
    this.name = application.name;
    this.owner = application.owner;
    this.app_status = application.app_status;
    this.category = application.category;
    this.application = application;
    this.modalRef = this.modalService.show(template);
  }

  /**
   * Update Application
   * @param nameValue     Name of Application
   * @param ownerValue     Owner of Application
   * @param app_statusValue     Status of Application
   * @param categoryValue     Category of Application
   */
   updateApplication(nameValue,ownerValue,app_statusValue,categoryValue) {

      console.log(this.application.id);
      console.log('updateApplication');
      console.log(this.application);
      console.log(nameValue,ownerValue,app_statusValue,categoryValue);
      this.temp_app.id = this.application.id;
      this.temp_app.name = nameValue.toUpperCase();
      this.temp_app.owner = ownerValue.toUpperCase();
      this.temp_app.app_status = app_statusValue.toUpperCase();

      console.log(categoryValue);
      let categoryItem = this.categories.find(i => i.name == categoryValue);
      console.log(this.categories.find(i => i.name == categoryValue));


      var cat = new Category();
      cat.id = categoryItem.id;
      cat.name = categoryItem.name;
      var x: Category[] = [
        cat
    ];
    console.log(x);
    this.temp_app["category"] = x; 
      //this.http.put<ServerResponse>('http://localhost:5000/api/app/'+this.application.id,this.temp_app)
      this.http.put<ServerResponse>(this.baseUrl+'/api/app/'+this.application.id,this.temp_app)
        .subscribe(data => {
            //let id = res['id'];
            console.log(data.data);
            this.applications = (<Data>data.data).applications;            
            this.router.navigate(['/applications']);
            this.closeFirstModal();
          }, (err) => {
            console.log(err.error.message);
            this.errorMessage = err.error.message;
          }
        );


  }

  /**
   * ----------------------------------------------------
   * Get All Categories
   * ----------------------------------------------------
   * @method getCategories
   */
  getCategories(searchTermValue) {
    console.log('calling getCategories');

      //this.http.get<ServerResponse>('http://localhost:5000/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
        this.http.get<ServerResponse>(this.baseUrl+'/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
      //console.log('data');
      console.log(data.data);
      this.categories = (<CategoryData>data.data).categories;
    });
    //console.log('data');
    //console.log(this.applications);
  }

  /**
   * ----------------------------------------------------
   * Get All Applications
   * ----------------------------------------------------
   * @method getApplications
   */
  getApplications(searchTermValue) {
    console.log('calling getApplications');

       //this.http.get<ServerResponse>('http://localhost:5000/api/app/search?searchTerm='+searchTermValue).subscribe(data => {
       this.http.get<ServerResponse>(this.baseUrl+'/api/app/search?searchTerm='+searchTermValue).subscribe(data => {  
       //console.log('data');
       console.log(data.data);
       this.applications = (<Data>data.data).applications;
     });
     //console.log('data');
     //console.log(this.applications);
  }  

  // Open Modal
  openModal(template: TemplateRef<any>) {
    this.errorMessage = '';
    this.name = '';
    this.owner = '';
    this.app_status = '';
    this.category = '';
    this.application = {};
    this.modalRef = this.modalService.show(template);
  }

  // Close Modal
  closeFirstModal() {
    this.modalRef.hide();
    this.modalRef = null;
  }


}






import { Component, TemplateRef, OnInit,Input,OnChanges, OnDestroy } from '@angular/core';
import { NgModule } from '@angular/core';
//import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
//import * as Query from '../global-query';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
//import { DataService } from '../core/data.service';
//import { Subscription } from 'rxjs/Subscription';
//import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { ServerResponse } from '../shared/interfaces';
import { Data , CategoryData } from '../shared/interfaces';
import { Category } from '../category';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';
import { StompService } from 'ng2-stomp-service';
import { Subscription } from 'rxjs';


@Component({
  selector: 'app-application',
  templateUrl: './application.component.html',
  styleUrls: ['./application.component.scss']
})

export class ApplicationComponent implements OnInit, OnChanges {
  @Input() searchTerm: String;
  modalRef: BsModalRef;
  applications: Array<any> = []; // List of Applications
  //applications: any;
  application: any = {};
  temp_app: any = {};
  name: any;
  owner: any;
  app_status: any;
  category: any;    
  stockQuote: number; 
  sub: Subscription;  
  categories: Array<any> = []; // List of Categories
  subscription: Subscription = null;
  connected = false;
  greetings = new Array<string>();
  notification: string;
  errorMessage : string;
  //baseUrlWebSocket: string = 'http://192.168.99.101:8090';
  //baseUrl: string = 'http://192.168.99.101:5000';
  baseUrlWebSocket: string = 'http://localhost:8090';
  baseUrl: string = 'http://localhost:5000';


  constructor(//private apollo: Apollo,
    private modalService: BsModalService//,private dataService: DataService//) { }
    ,private http: HttpClient, private router: Router,// private route: ActivatedRoute,
     private stomp: StompService) {
      console.log('stomp configure');
        //stomp.configure({host: 'http://localhost:8090/ws', queue: ''
        stomp.configure({host: this.baseUrlWebSocket+'/ws', queue: ''        
         //debug:false,
        //queue:{'init':false}
      });
      console.log('stomp configure complete');
     }

  ngOnInit() {
    console.log('ngOnInit');
    console.log('searchTerm');
    console.log(this.searchTerm.toUpperCase());
    this.getCategories('');
    console.log(this.categories);
    this.getApplications(this.searchTerm.toUpperCase());
    /*this.sub = this.dataService.getQuotes()
          .subscribe(quote => {
        //console.log('quote');
        //console.log(quote);           
            this.stockQuote = quote;
    });*/
    this.connect();
    console.log('Connected to Web Socket');

  }

  ngOnChanges() {
   // setTimeout(() => {
      console.log('ngOnChanges');
      console.log(this.searchTerm.toUpperCase());    
      //this.getCategories('');
      this.getApplications(this.searchTerm.toUpperCase());
      console.log('ngOnChanges complete');
      //}, 0);

  }  

  ngOnDestroy() {
    //this.sub.unsubscribe();
    console.log('disconnect');
    this.disconnect();
    console.log('disconnect complete');
  }   


  connect() {
    this.stomp.startConnect().then(() => {
      this.connected = true;
      console.log('connected');

      // there appears to be a bug in stomp-service which means the promise is
      // resolved before the connection state is properly changed
      setTimeout(() => {

        this.subscription =
          this.stomp.subscribe('/topic/ads',
            (data) => {
              console.log(data);
              this.notification = data.content;

            }
          );
      }, 50);
      console.log('subscribed');
    });
  }

  disconnect() {
    this.subscription.unsubscribe();
    this.stomp.disconnect().then(() => {
      console.log('disconnected');
      this.connected = false;
    });
  }

  sendName(name: string) {
    this.stomp.send('/app/hello', {'name': name});
  }

  /**
   * Create Application
   * @param nameValue     Name of Application
   * @param ownerValue     Owner of Application
   * @param app_statusValue     Status of Application
   * @param categoryValue     Category of Application
   */
  createApplication(nameValue,ownerValue,app_statusValue,categoryValue) {

    console.log('createApplication');

    //console.log(this.application["name"] +" "+ this.application["owner"]+" "+this.application["app_status"]+" "+this.application["category"]);
    this.temp_app["name"] = nameValue.toUpperCase();
    this.temp_app["owner"] = ownerValue.toUpperCase();
    this.temp_app["app_status"] = app_statusValue.toUpperCase();

    console.log(categoryValue);
    let categoryItem = this.categories.find(i => i.name == categoryValue);
    console.log(this.categories.find(i => i.name == categoryValue));


    var cat = new Category();
    cat.id = categoryItem.id;
    cat.name = categoryItem.name
    var x: Category[] = [
      cat
  ];
  console.log(x);
  this.temp_app["category"] = x;
    //this.http.post<ServerResponse>('http://localhost:5000/api/app/',this.temp_app)
    this.http.post<ServerResponse>(this.baseUrl+'/api/app/',this.temp_app)
      .subscribe(res => {
          //let id = res['id'];
          console.log(res);
          this.applications = (<Data>res.data).applications;               
          this.router.navigate(['/applications']);
          //this.router.navigate(['/applications']);
          this.closeFirstModal();
        }, (err) => {
          console.log(err.error.message);
          this.errorMessage = err.error.message;

        }
      );    
  }



  /**
   * Remove Application
   * @param id 
   */
  removeApplication(id) {
    //this.http.delete<ServerResponse>('http://localhost:5000/api/app/'+id)
    this.http.delete<ServerResponse>(this.baseUrl+'/api/app/'+id)
    .subscribe(res => {
        console.log(res);
        this.applications = (<Data>res.data).applications;               
        this.router.navigate(['/applications']);
      }, (err) => {
        console.log(err.error.message);
        this.errorMessage = err.error.message;
      }
    );
  }


  /**
   * Edit Application Form
   * @param application 
   * @param template 
   */
  showEditApplicationForm(application, template) {
    this.errorMessage = '';
    this.name = application.name;
    this.owner = application.owner;
    this.app_status = application.app_status;
    this.category = application.category;
    this.application = application;
    this.modalRef = this.modalService.show(template);
  }

  /**
   * Update Application
   * @param nameValue     Name of Application
   * @param ownerValue     Owner of Application
   * @param app_statusValue     Status of Application
   * @param categoryValue     Category of Application
   */
   updateApplication(nameValue,ownerValue,app_statusValue,categoryValue) {

      console.log(this.application.id);
      console.log('updateApplication');
      console.log(this.application);
      console.log(nameValue,ownerValue,app_statusValue,categoryValue);
      this.temp_app.id = this.application.id;
      this.temp_app.name = nameValue.toUpperCase();
      this.temp_app.owner = ownerValue.toUpperCase();
      this.temp_app.app_status = app_statusValue.toUpperCase();

      console.log(categoryValue);
      let categoryItem = this.categories.find(i => i.name == categoryValue);
      console.log(this.categories.find(i => i.name == categoryValue));


      var cat = new Category();
      cat.id = categoryItem.id;
      cat.name = categoryItem.name;
      var x: Category[] = [
        cat
    ];
    console.log(x);
    this.temp_app["category"] = x; 
      //this.http.put<ServerResponse>('http://localhost:5000/api/app/'+this.application.id,this.temp_app)
      this.http.put<ServerResponse>(this.baseUrl+'/api/app/'+this.application.id,this.temp_app)
        .subscribe(data => {
            //let id = res['id'];
            console.log(data.data);
            this.applications = (<Data>data.data).applications;            
            this.router.navigate(['/applications']);
            this.closeFirstModal();
          }, (err) => {
            console.log(err.error.message);
            this.errorMessage = err.error.message;
          }
        );


  }

  /**
   * ----------------------------------------------------
   * Get All Categories
   * ----------------------------------------------------
   * @method getCategories
   */
  getCategories(searchTermValue) {
    console.log('calling getCategories');

      //this.http.get<ServerResponse>('http://localhost:5000/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
        this.http.get<ServerResponse>(this.baseUrl+'/api/cat/search?searchTerm='+searchTermValue).subscribe(data => {
      //console.log('data');
      console.log(data.data);
      this.categories = (<CategoryData>data.data).categories;
    });
    //console.log('data');
    //console.log(this.applications);
  }

  /**
   * ----------------------------------------------------
   * Get All Applications
   * ----------------------------------------------------
   * @method getApplications
   */
  getApplications(searchTermValue) {
    console.log('calling getApplications');

       //this.http.get<ServerResponse>('http://localhost:5000/api/app/search?searchTerm='+searchTermValue).subscribe(data => {
       this.http.get<ServerResponse>(this.baseUrl+'/api/app/search?searchTerm='+searchTermValue).subscribe(data => {  
       //console.log('data');
       console.log(data.data);
       this.applications = (<Data>data.data).applications;
     });
     //console.log('data');
     //console.log(this.applications);
  }  

  // Open Modal
  openModal(template: TemplateRef<any>) {
    this.errorMessage = '';
    this.name = '';
    this.owner = '';
    this.app_status = '';
    this.category = '';
    this.application = {};
    this.modalRef = this.modalService.show(template);
  }

  // Close Modal
  closeFirstModal() {
    this.modalRef.hide();
    this.modalRef = null;
  }


}

Answer 1

Просто хотел обновить этот вопрос, чтобы замкнуть цикл.Я смог решить проблему, используя следующий код -

   <div class="row">
    <div class="col1" >
        <a href="applications" class="navbar-brand">Applications List</a>
    </div>
    <div class="col2">

    <!--<nav class="navbar navbar-dark bg-primary"> -->

      <div class="form-inline my-2 my-lg-0" style="padding-right: 10px;">
        <input class="form-control" (keyup)="term=searchInput.value" type="search" placeholder="Search" aria-label="Search" #searchInput>
      </div>
    </div>
  </div>
 <!-- </nav>-->
 <app-application [searchTerm]="term"></app-application>