使用无效数据调用的Query.startAt（）。不支持的字段值：自定义对象

Question

我正在尝试实现搜索功能。当用户在按下Enter键后在输入框中键入内容时，它将搜索Firebase集合并仅过滤选择的结果并填充列表。在我的收藏中有很多字段，我想为所有字段创建搜索功能。在文本框中写了一些内容后，当我按Enter键时，出现错误 Query.startAt（），该调用使用无效数据。不支持的字段值：自定义对象。也许我将不得不强制转换从输入框中获取的值类型。

Component.html-

<div class="search-pets">
 <input type="text" class="search-pet-input" placeholder="SEARCH..."(keydown.enter)="searchPets($event) ">
</div>

<div class="single-pet-list" *ngFor="let pet of allPets">
  <div class="pet-listing-header-owner">
   <p>{{ pet.OwnerName }}</p>
  </div>
  <div class="pet-listing-header-petname">
   <p>{{ pet.PetName }}</p>
  </div>
  <div class="pet-listing-header-petname">
    <p>{{ pet.PetType }}</p>
  </div>
  <div class="pet-listing-header-petbreed">
     <p>{{ pet.PetBreed }}</p>
  </div>
  <div class="pet-listing-header-petname">
     <p>{{ pet.PetSize }}</p>
  </div>
  <div class="pet-listing-header-date">
     <p>{{ pet.createdDate }}</p>
  </div>
</div>

Component.ts-

public allPets: any;
public startAt = new Subject();
public endAt = new Subject();

searchPets($event){
    console.log($event.target.value);

    let q = $event.target.value
    this.startAt.next(q)
    this.endAt.next(q+"\uf8ff")

    this.petservice.searchPets(this.startAt, this.endAt).subscribe(res => {
      this.allPets = res;
    })
  }

PetService.ts-

searchPets(start, end) {
    return this.afs
      .collection<any>("pets", ref =>
        ref
          .limit(4)
          .orderBy("OwnerName")
          .orderBy("PetName")
          .orderBy("PetBreed")
          .orderBy("PetType")
          .orderBy("PetSize")
          .startAt(start)
          .endAt(end)
      )
      .valueChanges();
  }

Answer 1

startAt和endAt仅接受字符串，而在代码中，您正在传递Subject对象。

要解决查询中的语法错误，您需要将Component.ts更改为以下内容：

public allPets: any;

searchPets($event){
    let q = $event.target.value + "";

    console.log("Searching pets: ", q);

    this.petservice.searchPets(q, q+"\uf8ff").subscribe(res => {
      this.allPets = res;
    });
  }