0

我使用带有 observable 的异步管道在 Angular 中实现了我的搜索。我将 observable 分配给使用 switchmap 完成的搜索 observable。但它不起作用！我认为这与一个分配覆盖另一个有关。但是我需要在开始搜索之前显示一些数据（反正谁不会。）我试图通过先分配数据然后搜索来反转它，但是没有显示任何数据，它只在我开始输入时才有效。

所以我的问题是如何修复它，以便我可以拥有搜索功能并在开始时仍然显示一些数据。使用异步管道而不订阅组件

以及使其更清晰的场景>在组件初始化时，我想向服务器发出请求并获取初始数据显示它。并且还通过向服务器发出另一个请求，将我相同的可观察对象“分配”给用户键入要搜索的条件的输入。

任何帮助表示赞赏

类似的问题，但没有具体的答案和不推荐使用的 rxjs 运算符

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);
      }));
  }
4

1 回答 1

0

问题是您在第一次分配后立即覆盖了 observable。听起来您希望 observable 立即发出一个初始值，然后在每次值更改后（例如，您输入某些内容）它应该加载其他数据。

这是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.

由于您的 observable 只会在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);
    }),
  );
}
于 2020-04-29T05:51:08.583 回答