Невозможно выполнить поисковый запрос в реальном времени

Question 1

HTML

<form [formGroup]="searchForm" onsubmit="return false" id="searchField" ng-submit="" \">
      <input type="text" placeholder="Search" formControlName="search" (keyup)="updateQuery()"/>

      <li *ngFor="let product of querySearch | async">
        {{ product.name }}
      </li>

</form>

Настройка конструктора форм

this.searchForm = this.fb.group({
      search: ['', Validators.required],
    });

this.afs.collection<any>('name', ref => ref.where('name', '==', name));

Кажется, я не могу создать эту панель поиска. Идея состоит в том, что при каждом изменении значения поля ввода запрос firestore изменяется на поиск «products / {id}» для извлечения всех продуктов, значение имени которых - Brian. Кажется, я не могу точно создать код, который будет заполнять li под полем поиска соответствующим материалом из запроса.

Любая помощь будет принята с благодарностью ... следует ли мне подписаться на содержимое поля ввода, а затем обновить запрос из тела подписки?

javascript angular firebase google-cloud-firestore

1

Benjamin Hobson 30 Окт 2019 в 03:04

1

Таким образом, в вопросе есть несколько недостающих частей. Как вы сохраняете поисковый ответ из вашего запроса afs, что это за свойство name, которое у вас есть, и почему оно не совпадает со свойством search, которое вы получили бы в своей реактивной форме. как ценность?

–

SiddAjmera

30 Окт 2019 в 03:08

Answer

Для этого вам действительно не нужна реактивная форма. Просто используйте [(ngModel)].

Вот, попробуй:

<input type="text" placeholder="Search" [(ngModel)]="search" (keyup)="updateQuery()"/>
<ul>
    <li *ngFor="let product of results$ | async">
        {{ product.name }}
    </li>
</ul>

И в вашем классе компонентов:

import { Component } from "@angular/core";
import { AngularFirestore, AngularFirestoreCollection } from "@angular/fire/firestore";
import { Observable } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  results$: AngularFirestoreCollection<any>;
  search = '';

  constructor(private afs: AngularFirestore) {}

  ...

  updateQuery() {
    this.results$ = this.afs.collection<any>("items", ref =>
      ref.where("name", "==", this.search)
    );
  }
}

PS: Я пытаюсь создать StackBlitz для демонстрации кода, но у меня проблема с установкой зависимости firebase. Я обновлю это с помощью демонстрации, как только мне это удастся.

1

SiddAjmera 30 Окт 2019 в 03:30

Спасибо... Я не могу проголосовать из-за своей репутации, но отметил это галочкой.

–

Benjamin Hobson

30 Окт 2019 в 07:24

Не беспокойся, приятель. Рад, что смог помочь :)

–

SiddAjmera

30 Окт 2019 в 07:32

Question 2

Для этого вам действительно не нужна реактивная форма. Просто используйте [(ngModel)].

Вот, попробуй:

<input type="text" placeholder="Search" [(ngModel)]="search" (keyup)="updateQuery()"/>
<ul>
    <li *ngFor="let product of results$ | async">
        {{ product.name }}
    </li>
</ul>

И в вашем классе компонентов:

import { Component } from "@angular/core";
import { AngularFirestore, AngularFirestoreCollection } from "@angular/fire/firestore";
import { Observable } from "rxjs";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  results$: AngularFirestoreCollection<any>;
  search = '';

  constructor(private afs: AngularFirestore) {}

  ...

  updateQuery() {
    this.results$ = this.afs.collection<any>("items", ref =>
      ref.where("name", "==", this.search)
    );
  }
}

PS: Я пытаюсь создать StackBlitz для демонстрации кода, но у меня проблема с установкой зависимости firebase. Я обновлю это с помощью демонстрации, как только мне это удастся.

1

SiddAjmera 30 Окт 2019 в 03:30

Спасибо... Я не могу проголосовать из-за своей репутации, но отметил это галочкой.

–

Benjamin Hobson

30 Окт 2019 в 07:24

Не беспокойся, приятель. Рад, что смог помочь :)

–

SiddAjmera

30 Окт 2019 в 07:32

Невозможно выполнить поисковый запрос в реальном времени

1 ответ

Похожие вопросы

Новые вопросы

javascript