Угловой 7 rxjs / operator / debounceTime on Тема дублирующее действие - PullRequest
Новая
       1

Угловой 7 rxjs / operator / debounceTime on Тема дублирующее действие

0 голосов
/ 17 марта 2019

В приложении Angular7 я захватил событие KeyUp числового ввода с помощью этого HTML-кода: 

<input fxFlex
     type="number" 
     formControlName="DM"
     (keyup)="changeDM()">
</div>

Я использую debounceTime (500) для задержки вызова службы, которая обрабатывает форму.Я пишу 1, 2, 3, 4 ... цифру и вижу, что debounceTime (500) работает правильно, но при этом дублирует вызов службы.Посмотрите код: 

subject: Subject<any> = new Subject();

.....

this.subj.pipe(debounceTime(500)).subscribe(() => {
    console.log('==CALL TO SERVICE==');
    this.service.setForm( this.form.valid, this.form.value );
});

changeDM(): void { 
    console.log('changeDM==============');
    this.subject.next();
}

и образ консоли браузера с четырьмя кнопками:

enter image description here

Почему сервис называетсядва раза?Спасибо.

изображение, на котором я показываю содержимое ввода после каждого нажатия.Импульс 8 и ожидание более 500 мс, импульс 4567 ... Вы можете увидеть результат.

enter image description here

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

У меня также были некоторые проблемы с этим же сценарием, надеюсь, он поможет вам / кому-то. DEMO

Мне было немного трудно обернуть голову вокруг наблюдателя и наблюдателя.Он немного расскажет о том, как это происходит, и о том, как связана статья, содержит более подробные обзоры.

Мы используем объект RxJS, который действует как наблюдаемый и наблюдатель.В нашей теме есть метод next (), который мы будем использовать в шаблоне, чтобы передать наш поисковый термин в тему при вводе. поиск в реальном времени angular-rxjs 

export class Example {
  response: any;
  term$: Subject < string > = new Subject < string > ();

  constructor(private exampleSerivce: ExampleService) {
    this.exampleSerivce.search(this.term$).subscribe(res => this.response = res);
  }
}

@Injectable()
export class ExampleService {

  constructor(private http: HttpClient) {}

  search(term: Observable < string > ) {
    return term.pipe(
      filter(val => !!val),
      distinctUntilChanged(),
      debounceTime(500),
      switchMap(term => this.searchTodo(term)),
      catchError(() => {
        return of({
          error: 'no todo found'
        });
      })
    );
  }

  searchTodo(term: string) {
    return this.http.get(`https://jsonplaceholder.typicode.com/todos/${term}`);
  }
}

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Input - Numbers only please" (keyup)="term$.next($event.target.value)">
  </mat-form-field>

  <div class="todo">
    {{response | json}}
  </div>
</div>
0 голосов
/ 17 марта 2019

Debouncetime просто сохраняет последнее значение в пределах временного интервала.пожалуйста, проверьте мраморную схему здесь.http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime

...