обнаружение изменений не работает при отклонении углового входа - PullRequest
Новая
       31

обнаружение изменений не работает при отклонении углового входа

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

У меня есть вход и на дебат (полсекунды после окончания ввода) я устанавливаю переменную.Я хочу, чтобы эта переменная изменила некоторые HTML.Это работает, но только после того, как я закончу печатать, затем напечатайте и начните снова.Так что на второй ход это работает.Я бы хотел, чтобы это произошло в первый раз.

Вот мой HTML: 

  <loader *ngIf="searchLoader"></loader>
  <input
    #searchInput
    placeholder="Search pages"
    [(ngModel)]="searchQuery"
    (keyup)="debounceSearch.next($event.target.value)"
  >

и мой TS: 

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

  ngOnInit() {
    this.debounceSearch
      .pipe(debounceTime(500))
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        this.searchLoader = true;
        this.searchDocs();
      });
  }

Итак, в приведенном выше<loader></loader> появляется только после второго отката.Это странно, потому что я немедленно установил для переменной значение true.

  • debounceTime происходит от оператора rxjs import { debounceTime, takeUntil } from "rxjs/operators";, по существу, через установленное количество времени (500 мс) он запускает то, что когда-либо было в .subscribefunction.

Я пытался использовать ref детектора изменений и обнаруживать изменения в функции подписки, но у меня это не сработало.

Есть идеи?Спасибо!

1 Ответ

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

Проблема здесь в том, что вы пытаетесь присвоить значение, когда еще ничего не сработало Subscription.

Возьмите этот пример на StackBlitz Если вы откроете журнал консоли,в конечном итоге вы увидите это в следующем порядке

  • ngOnChanges с именем
  • ngOnInit вызывается.
  • turnOn не определено

Обратите внимание, что console.log внутри подписки не вызывается.

Поскольку подписка не инициируется, внутренний обратный вызов никогда не вызывается.Одним из решений вашей текущей ситуации является назначение значения по умолчанию this.searchLoader = true or false; за пределами ngOnInit

@Component({
  selector: 'hello',
  template: `
    <h1>Hello {{name}}!</h1>
    <p *ngIf="turnOn">I'm a ninja</p>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit  {
  @Input() name: string;

  turnOn: boolean;
  switchSubject: Subject<any> = new Subject<any>();

  ngOnChanges() {
    console.log('ngOnChanges called.');
  }

  ngOnInit() {
    console.log('ngOnInit called.');
    this.switchSubject.subscribe(() => {
      console.log('subscription activated.');
      this.turnOn = true;
    })
    console.log(`turnOn is ${this.turnOn}`)
  }
}
...