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

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

angularfire2 angular5 ionic3 typescript angular

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 年前

Community Mohan Dere 5 年前

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}}

bc1105 7 年前

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

import { Observable } from 'rxjs/Observable';

const filtered: Observable<boolean> = Observable.of( 
    this.restaurantService.filterRestaurants(this.searchKey)
);


filtered.subscribe(...);

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