Angular входной поиск не работает с использованием карты переключателей, а также пытается отобразить некоторые данные инициализации - PullRequest
Новая
       54

Angular входной поиск не работает с использованием карты переключателей, а также пытается отобразить некоторые данные инициализации

0 голосов
/ 29 апреля 2020

Мой поиск реализован в Angular с использованием асин c канала с наблюдаемой. Я назначаю наблюдаемое поисковому виду, выполненному с помощью switchmap. Но это не работает! Я думаю, что это связано с тем, что одно назначение перезаписывает другое. Но мне нужно, чтобы некоторые данные отображались перед началом поиска (а кто нет). Я попытался отменить их, сначала назначив данные, а затем выполнить поиск, но затем данные не отображаются, и это работает только тогда, когда я начинаю печатать.

Итак, мой вопрос: как я могу это исправить, чтобы я мог использовать функцию поиска и при этом отображать некоторые данные в начале. Использование asyn c pipe и отсутствие подписки в компоненте

и сценарий, чтобы сделать его более понятным> При инициализации компонента я хочу сделать запрос к серверу и получить начальные данные для его отображения. А также «назначение» того же самого наблюдаемого на вход, где пользователь вводит критерии для поиска, делая еще один запрос к серверу.

Любая помощь приветствуется

Аналогичный вопрос, но нет конкретного ответа и устаревшие rx js операторов

Angular2 - получить данные из службы при инициализации с помощью Switchmap 

queryField: FormControl;
customerOrdersObservable: Observable<NextCustomerOrdersPaginationModel>;

ngOnInit() {
    this.customerOrdersObservable = this.queryField.valueChanges.pipe(
      debounceTime(500),
      distinctUntilChanged(),
      switchMap((searchInput) => {
        this.transformSearchInput(searchInput);
        return this.customerOrderService.getSearchedCustomerOrders(this.page, this.pageSize, this.searchTerm);
      }));
    this.customerOrdersObservable = this.customerOrderService.getSearchedCustomerOrders(
      this.page, this.pageSize, this.searchTerm);
  }

Изменить на 

ngOnInit() {
    this.customerOrdersObservable = this.queryField.valueChanges.pipe(
      startWith(this.customerOrderService.getSearchedCustomerOrders(
      this.page, this.pageSize, this.searchTerm)), > 'would have been great but its not possible (unless im wrong)'
      debounceTime(500),
      distinctUntilChanged(),
      switchMap((searchInput) => {
        this.transformSearchInput(searchInput);
        return this.customerOrderService.getSearchedCustomerOrders(this.page, this.pageSize, this.searchTerm);
      }));
  }

1 Ответ

0 голосов
/ 29 апреля 2020

Проблема в том, что вы перезаписываете наблюдаемое сразу после того, как оно было назначено в первый раз. Это звучит , как будто вы хотите, чтобы наблюдаемая немедленно выдавала начальное значение, затем после каждого изменения значения (например, вы что-то вводите) она должна загружать другие данные.

Это то, что startWith для. 

ngOnInit() {
  const initialData = {};
  this.customerOrdersObservable = this.queryField.valueChanges.pipe(
    debounceTime(500),
    distinctUntilChanged(),
    switchMap((searchInput) => {
      this.transformSearchInput(searchInput);
      return this.customerOrderService.getSearchedCustomerOrders(this.page, this.pageSize, this.searchTerm);
    }),
    startWith(initialData),
  );
}

// После небольшого разъяснения: OP хочет, чтобы начальные данные были изначально получены из бэкэнда. Есть пара рабочих решений, я постараюсь придерживаться startWith.

Поскольку ваша наблюдаемая будет выдавать значения только после того, как queryField.valueChanges испустит новое значение, нам нужно определить для него начальную точку. Мы можем снова использовать startWith и просто «высмеивать» его исходное значение излучения: 

ngOnInit() {
  const initialQueryFieldData = {}; // You will have to define this depending on the type `queryField.valueChanges` emits.
  this.customerOrdersObservable = this.queryField.valueChanges.pipe(
    startWith(initialQueryFieldData),
    debounceTime(500),
    distinctUntilChanged(),
    switchMap((searchInput) => {
      // The very first emit should have `initialQueryFieldData` as `searchInput`
      this.transformSearchInput(searchInput);
      return this.customerOrderService.getSearchedCustomerOrders(this.page, this.pageSize, this.searchTerm);
    }),
  );
}
...