代码之家  ›  专栏  ›  技术社区  ›  Sireini

将静态数组搜索转化为可观察搜索

  •  0
  • Sireini  · 技术社区  · 7 年前

    我有一个问题我想不出来。。

    我有一个在静态数组上运行良好的函数,但现在我想将其转换为obseravble中的搜索。

    这是我家的搜索栏。html:

    <ion-searchbar [(ngModel)]="searchKey" [formControl]="searchControl" (ionInput)="onInput($event)" (ionCancel)="onCancel($event)"></ion-searchbar>
    

    这就是家。ts:

    export class HomePage {
    
       searchControl: FormControl;
       searching: any = false;
       restaurantsList: Observable<any[]>;
    
       constructor(){
           this.restaurantsList = this.restaurantService.getRestaurantList();
           this.searchControl = new FormControl();
       }      
    
       ionViewDidLoad(){
          this.searchControl.valueChanges.debounceTime(700).subscribe(search => {  
             this.searching = false;
             this.setFilteredItems();
         });
        }
        setFilteredItems(){
           this.restaurantService.filterRestaurants(this.searchKey).subscribe(
               foundRestaurant => this.restaurantsList = foundRestaurant
           )
    
           console.log(this.restaurantService.filterRestaurants(this.searchKey));
         }
    
         onInput(event) {
            this.searching = true;
         }
    

    这是餐厅服务。ts:

    export class RestaurantService {
    
      restaurantsRef: AngularFireList<any>;
      restaurantsList: Observable<any[]>;
    
      constructor(
          public afDb: AngularFireDatabase
      ) {
          this.restaurantsRef = afDb.list('/restaurants');
          this.restaurantsList = this.restaurantsRef.valueChanges();
      }
    
       getRestaurantList() {
          return this.restaurantsList;
       }
    
        filterRestaurants(searchKey: string) {
           let key: string = searchKey.toUpperCase();
    
           return this.restaurantsList.map(
               restaurantsList => restaurantsList.filter(
                  restaurant => [
                    restaurant.title.toUpperCase(),
                    restaurant.address.toUpperCase(),
                    restaurant.city.toUpperCase(),
                    restaurant.description.toUpperCase()
                ].join(' ').indexOf(key) > -1)
           );
        }
    }
    

    但是在 setFilteredItems() ide显示的方法 this.restaurantList : Type boolean is not assignable to type Observable<any[]>

    有人知道将restaurantList更改为filteredItems的解决方案吗?

    仅供参考,我遵循本教程: LINK

    3 回复  |  直到 7 年前
        1
  •  1
  •   Community CDub    4 年前

    this.restaurantService.filterRestaurants 返回 Observable 您正在订阅它的结果,并在subscribe方法中尝试将结果分配给另一个 可观察到

    如果您想订阅observable的结果并更新重启数组,那么您的 restaurantsList 应为数组:

    class HomePage {
       restaurantsList: any[];
    

    所有代码都应该可以正常工作。

    _______________________________________________

    或者如果你想用一个新的observable更新你的observable 那么您不应该在subscribe方法中执行此操作

    setFilteredItems(){
        this.restaurantsList = this.restaurantService.filterRestaurants(this.searchKey);
    }
    

    然后在html中使用异步管道订阅此可观察对象并呈现其值列表(这里我还使用json管道进行调试)

    {{restaurantsList | async | json}}
    

        2
  •  0
  •   bc1105    7 年前

    查看返回的 filterRestaurants ,它是一个布尔值。定义的属性 restaurantsList 成为可观察的。您需要转换的结果 过滤器固定器 变成可观察的。

    import { Observable } from 'rxjs/Observable';
    
    const filtered: Observable<boolean> = Observable.of( 
        this.restaurantService.filterRestaurants(this.searchKey)
    );
    
    
    filtered.subscribe(...);
    
        3
  •  0
  •   Pankaj Parkar    7 年前

    我似乎犯了语法错误。以下是临时版本和正确的搜索检查 key

    filterRestaurants(searchKey: string) {
        //below line isn't needed at all.
        //this.restaurantsList.subscribe()
        let key: string = searchKey.toUpperCase();
        //returns Observable
        return this.restaurantsList.map(
           restaurantsList => {
             restaurantsList.filter(
               let result = restaurant => [
                  restaurant.title.toUpperCase(),
                  restaurant.address.toUpperCase(),
                  restaurant.city.toUpperCase(),
                  restaurant.description.toUpperCase()
               ].join(' ').indexOf(key) > -1
              );
              return Observable.of(result);
           }
        );
    }