Operador de tuberías que no se comporta como esperado RXJS -- javascript campo con angular campo con rxjs camp Relacionados El problema

pipe operator not behaving as expected RXJS


0
vote

problema

Español

Mire mi componente a continuación, el propósito es escuchar cambios en una entrada, que hace y luego emite el valor al componente principal. Creé una tubería para emitir solo de vez en cuando y no minimiza las llamadas a la API, por alguna razón, aunque puedo ver a través de diversos detectChange4 declaraciones que va en la tubería, emite el valor en cada cambio ¿Qué es lo que me falta:

  import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, KeyValueDiffers, DoCheck, KeyValueDiffer} from '@angular/core'; import {BehaviorSubject, Observable, of} from "rxjs"; import {debounceTime, distinctUntilChanged, map, skip, switchMap, takeUntil, tap} from "rxjs/operators";  @Component({   selector: 'core-ui-typeahead-filter',   changeDetection: ChangeDetectionStrategy.OnPush,   templateUrl: './typeahead-filter.component.html', }) export class TypeaheadFilterComponent implements DoCheck {   @Input() id: string;   @Input() name: string;   @Input() caption: string;   @Input() placeholder: string;   @Input() cssClass: string;   @Input() cssStyle: string;   @Input() function: any;    @Input() data: Observable<string[]>;   differ: any;   detectChange: string = '';   // term$ = new BehaviorSubject<string>('');   text$ = new Observable<string>();    @Output() onTypeahead: EventEmitter<any> = new EventEmitter<any>();   @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();     constructor(private differs: KeyValueDiffers) {     this.differ = this.differs.find({}).create();   }    handleTypeahead = (text$: Observable<string>) =>     text$.pipe(       distinctUntilChanged(),       debounceTime(500),     ).subscribe((value) => {       this.onTypeahead.emit(of(value))     })   handleSelectItem(item) {   this.onSelect.emit(item); }  ngDoCheck() {     const change = this.differ.diff(this);     if (change) {       change.forEachChangedItem(item => {         if (item.key === 'detectChange'){           console.log('item changed', item)           this.text$ = of(item.currentValue);           this.handleTypeahead(this.text$);         }       });     }   }  }   

Más detalles: Hay un Ngmodel en la entrada vinculada a detectChange6 cuando cambia, luego se llama y se llama el ngDoCheck . Todo se realiza en observables, por lo que en el padre puedo suscribirse a los eventos entrantes. Editar --------------------------------------------------- ------------------ Probé la siguiente solución basada en mi comprensión de la respuesta @ggradnig, lamentablemente se salta sobre mi pipa, algo le parece mal, realmente no estoy seguro de qué:

   handleTypeahead = (text$: Observable<string>) => {     this.test.subscribe(this.text$);     this.test.pipe(       distinctUntilChanged(),       debounceTime(500),       // switchMap(value => text$)     ).subscribe((value) => {       tap(console.log('im inside the subscription',value))       this.onTypeahead.emit(value)     })   }    handleSelectItem(item) {   this.onSelect.emit(item); }  ngDoCheck() {     const change = this.differ.diff(this);     if (change) {       change.forEachChangedItem(item => {         if (item.key === 'detectChange'){           console.log('item changed', item)           this.text$ = of(item.currentValue);           this.handleTypeahead(this.test);         }       });     }   }  }   
Original en ingles

Please look at my component below the purpose to is to listen on changes to an input, which it does and then emit the value to the parent component. I created a pipe to only emit every so often and therby minimize the calls to the api, for some reason even though I can see through various console.log statements that it goes in the pipe, it emits the value on every change. What is it that I am missing:

import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, KeyValueDiffers, DoCheck, KeyValueDiffer} from '@angular/core'; import {BehaviorSubject, Observable, of} from "rxjs"; import {debounceTime, distinctUntilChanged, map, skip, switchMap, takeUntil, tap} from "rxjs/operators";  @Component({   selector: 'core-ui-typeahead-filter',   changeDetection: ChangeDetectionStrategy.OnPush,   templateUrl: './typeahead-filter.component.html', }) export class TypeaheadFilterComponent implements DoCheck {   @Input() id: string;   @Input() name: string;   @Input() caption: string;   @Input() placeholder: string;   @Input() cssClass: string;   @Input() cssStyle: string;   @Input() function: any;    @Input() data: Observable<string[]>;   differ: any;   detectChange: string = '';   // term$ = new BehaviorSubject<string>('');   text$ = new Observable<string>();    @Output() onTypeahead: EventEmitter<any> = new EventEmitter<any>();   @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();     constructor(private differs: KeyValueDiffers) {     this.differ = this.differs.find({}).create();   }    handleTypeahead = (text$: Observable<string>) =>     text$.pipe(       distinctUntilChanged(),       debounceTime(500),     ).subscribe((value) => {       this.onTypeahead.emit(of(value))     })   handleSelectItem(item) {   this.onSelect.emit(item); }  ngDoCheck() {     const change = this.differ.diff(this);     if (change) {       change.forEachChangedItem(item => {         if (item.key === 'detectChange'){           console.log('item changed', item)           this.text$ = of(item.currentValue);           this.handleTypeahead(this.text$);         }       });     }   }  } 

More background: There is an ngModel on the input linked to detectChange when it changes then the ngDoCheck is called and executes. Everything is done in observables so in the parent I can subscribe to the incoming events. EDIT ------------------------------------------------------------------- Tried the following solution based on my understanding of @ggradnig answer, sadly it skips over my pipe something seems wrong with it, really not sure what:

 handleTypeahead = (text$: Observable<string>) => {     this.test.subscribe(this.text$);     this.test.pipe(       distinctUntilChanged(),       debounceTime(500),       // switchMap(value => text$)     ).subscribe((value) => {       tap(console.log('im inside the subscription',value))       this.onTypeahead.emit(value)     })   }    handleSelectItem(item) {   this.onSelect.emit(item); }  ngDoCheck() {     const change = this.differ.diff(this);     if (change) {       change.forEachChangedItem(item => {         if (item.key === 'detectChange'){           console.log('item changed', item)           this.text$ = of(item.currentValue);           this.handleTypeahead(this.test);         }       });     }   }  } 
        
     
     

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Puede hacer lo siguiente -

  Option[YourClass]4  

Ahora, en la parte inferior de su plantilla, ponga la siguiente línea -

  Option[YourClass]5  

Tener esta línea mantendrá su código de componente FORMULARIO GRATIS Gestionar la suscripción [I.E. no necesita suscribirse / cancelar la suscripción]; Async Pipe se encargará de ello.

 

You can do the following -

export class TypeaheadFilterComponent implements DoCheck {   @Input() id: string;   @Input() name: string;   @Input() caption: string;   @Input() placeholder: string;   @Input() cssClass: string;   @Input() cssStyle: string;   @Input() function: any;    @Input() data: Observable<string[]>;   differ: any;   detectChange: string = '';   // term$ = new BehaviorSubject<string>('');   text$ = new BehaviorSubject<string>('');   serachTerm$: Observable<string>;    @Output() onTypeahead: EventEmitter<any> = new EventEmitter<any>();   @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();     constructor(private differs: KeyValueDiffers) {     this.differ = this.differs.find({}).create();   }    // handleTypeahead = (text$: Observable<string>) =>   //   text$.pipe(   //     distinctUntilChanged(),   //     debounceTime(500),   //   ).subscribe((value) => {   //     this.onTypeahead.emit(of(value))   //   })    ngOnInit() {      this.serachTerm$ = this.text$                            .pipe(                             distinctUntilChanged(),                             debounceTime(500),                             //filter(), //use filter operator if your logic wants to ignore certain string like empty/null                             tap(s => this.onTypeahead.emit(s))                            );   }   handleSelectItem(item) {   this.onSelect.emit(item); }  ngDoCheck() {     const change = this.differ.diff(this);     if (change) {       change.forEachChangedItem(item => {         if (item.key === 'detectChange'){           console.log('item changed', item)           this.text$.next(item.currentValue);                   }       });     }   }  } 

Now, at the bottom of your template put the following line -

<ng-container *ngIf="searchTerm$ | async"></ng-container> 

Having this line will keep your component code free form managing the subscription [i.e. need not to subscribe/unsubscribe]; async pipe will take care of it.

 
 
         
         

Relacionados problema

2  RXJS: Trabajando en Groupby y observable.Fromvents en Nodejs  ( Rxjs working on groupby and observable fromevents in nodejs ) 
Estoy muy impresionado con RXJS y en realidad comienza a trabajar en eso. Sin embargo, mi siguiente código NODEJS no funciona como se espera al menos para mí....

0  Combinar la promesa con observable  ( Merge promise with observable ) 
Aquí está el extracto de mi servicio, me gustaría getIssues METOD para devolver a observar, en lugar de prometer resolverse en observable, ya que parece muc...

0  Ejecutar alguna función al llegar a un nuevo observador en un comportamiento angular  ( Execute some function on arriving a new observer in angular behaviorsubject ) 
Me gustaría ejecutar alguna función cuando un nuevo observador llega por un comportamiento en angular. export class MyClass { public bs: BehaviorSubject<...

242  ¿Es necesario cancelar la suscripción de los observables creados por los métodos HTTP?  ( Is it necessary to unsubscribe from observables created by http methods ) 
¿Necesita cancelar la suscripción de las llamadas HTTP angular 2 para evitar la pérdida de memoria? fetchFilm(index) { var sub = this._http.get(`h...

0  ¿Es posible actualizar observable con datos propios en Angular2 / TyperScript?  ( Is it possible to update observable with own data in angular2 typescript ) 
Tengo un NGFOR con ASYNC así: <div *ngFor="let location of googleSearchLocations | async"> <div *ngFor="let location of facebookSearchLocations | async"> ...

8  Angular2: Captura 401 Error para la actualización del token  ( Angular2 catching 401 error for token refresh ) 
Soy nuevo en Angular2 e intentando el error 401 Error de Token Actualizar con el plan para reintentar la solicitud original ... Aquí está mi método AuthServ...

2  rxjs una secuencia múltiples suscripciones toman x  ( Rxjs one sequence multiple subscriptions take x ) 
Digamos que tengo un observable RXJS creado a partir de una matriz de valores: let obs = Observable.fromArray([1,2,3,4,5,6]); En algún botón, hacemos e...

3  Angular 7 propiedad 'Share' no existe en tipo observable  ( Angular 7 property share does not exists in type observable ) 
Estaba escribiendo CachcingserviceBase en Angular 7, pero el siguiente error parece ser presionado "La participación observable no es una función" $("#lobb...

0  Cómo enlazar la casilla de verificación para volver a calcular los datos dinámicos en el script de tipo angular 6  ( How to bind checkbox to recalculate dynamic data in angular 6 using type script ) 
Quería manipular los resultados de los datos cuando se cambia el evento de la casilla de verificación. Poloqué los datos dinámicos en una tabla y me deben fil...

45  Manejo de tokens de refrescar usando RXJS  ( Handling refresh tokens using rxjs ) 
Desde que comencé con angular2, he configurado mis servicios para devolver a la observable de T. En el servicio, tendría la llamada MAP (), y los componentes ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos