javascript - Ionic4:搜索栏结果未按预期工作

Question

我正在使用ion-searchbar在我的应用程序中。我使用搜索栏按名字和/或姓氏过滤客户列表，但我真的很难解决这两个问题:

问题 1:搜索栏仅匹配名字或姓氏，但不能同时匹配两者。例如:如果我是客户，我的名字是 Marshall Legend，并且我输入 Marshall，则过滤器将起作用，或者如果我输入 Legend，则过滤器将起作用，但如果我输入 Marshall Legend 我没有找到匹配项。

问题 2:这作为一个场景更容易解释。客户列表正确地过滤了列表并显示了正确的结果，例如当我在搜索栏中输入“Marshall”时，仅显示名为“Marshall”的人。然而，然后一个新客户被添加到列表中(来自另一个客户)，突然间所有客户都被显示并且过滤器被忽略，即使“Marshall”仍然在我的搜索栏中。

我已经在这两个问题上苦苦挣扎了一段令人尴尬的时间，非常感谢任何帮助。下面是我的代码:

我的组件代码

export class Tab2Page implements OnInit {
  public searchTerm: string = "";
  public customerCollection: AngularFirestoreCollection<any>;
  public customers: any[];
  public unfilteredCustomers: any[];

  constructor(private afs: AngularFirestore, 
    public modalController: ModalController,
    private databaseService: DatabaseService) {}

  ngOnInit(){
    this.customerCollection = this.afs.collection('Customers');
    this.customerCollection.valueChanges().subscribe( val => {
      this.customers = val;
      this.unfilteredCustomers = val;
    });
  }

  /**
   * Search functionality 
   */
  public onSearchTerm() {
    if(/\S/.test(this.searchTerm)){
      this.customers = this.unfilteredCustomers.filter(customer => {
        return customer.lastName.toLowerCase().includes(this.searchTerm.toLowerCase())  
        || customer.firstName.toLowerCase().includes(this.searchTerm.toLowerCase());
      });
    } else {
      this.customers = this.unfilteredCustomers;
    }
  }

我的模板代码

    <ion-item-sliding *ngFor="let customer of customers">
          <ion-item-options side="start">
            <ion-item-option (click)="viewCustomerDetails(customer)">Details</ion-item-option>
          </ion-item-options>
        <ion-item>
         <ion-label>
         <ion-icon name="person"></ion-icon> {{customer?.firstName}} 
           {{customer?.lastName}}
         </ion-label>
         </ion-item>
          <ion-item-options side="end">
            <ion-item-option color="danger" (click)="removeCustomer(customer)">Return</ion-item-option>
          </ion-item-options>
    </ion-item-sliding>

Answer 1

问题1

您的搜索逻辑如下:

1. 如果名字或姓氏等于“legend”，则返回 true
2. 如果名字或姓氏等于“marshall”，则返回 true
3. 如果名字或姓氏等于“marshall legend”，则返回 true

由于名字和姓氏在 Firestore 中的两个属性之间分开，因此第三种情况永远不会发生。试试这个:

  public onSearchTerm() {
    if (searchTerms.length < 1) {
      this.customers = this.unfilteredCustomers;
      return;
    }

    const searchTerms = this.searchTerm.split(' ').map(s => s.trim().toLowerCase());

    this.customers = this.unfilteredCustomers.filter(customer => {
      var firstName = customer.firstName.toLowerCase();
      var lastName = customer.lastName.toLowerCase();

      var results = searchTerms.filter(name => firstName.includes(name) || lastName.includes(name));

      return results.length > 0;
    });

  }

问题2

在你的 ngOnInit 函数中，你订阅了你的客户集合，监视任何变化，当发生这种情况时，它会覆盖你的 this.customers 变量。这就是您的列表刷新并显示所有结果的原因。试试这个:

  ngOnInit(){
    this.customerCollection = this.afs.collection('Customers');
    this.customerCollection.valueChanges().subscribe( val => {
      this.unfilteredCustomers = val;

      // If there is a search term, filter the results
      if (this.searchTerm.trim().length > 0) {
        this.onSearchTerm();
      } else {
        this.customers = val;   
      }
    });
  }