De Sharlene Khan
AcțiuneTweetAcțiuneE-mail

Rezolvați eroarea „interogarea necesită un index” și faceți ca interogările Firebase să funcționeze în armonie cu aplicația Angular.

Una dintre caracteristicile Firebase este că puteți crea o bază de date NoSQL stocată în cloud. De asemenea, puteți integra această bază de date în aplicațiile pe care le dezvoltați și puteți stoca, actualiza și șterge datele din baza de date.

De asemenea, puteți interoga baza de date Firebase din aplicația dvs. Angular. Firebase vă solicită să indexați combinațiile de câmpuri pentru o interogare care utilizează mai multe câmpuri. Acest lucru permite Firebase să le caute cu ușurință atunci când apelați interogarea într-un alt moment.

Configurați-vă aplicația Angular și baza de date Firebase

Înainte de a scrie interogările Firebase, va trebui să creați o aplicație unghiulară și o bază de date Firebase. De asemenea, va trebui să configurați aplicația Angular pentru a vă conecta la baza de date.

instagram viewer
  1. Dacă nu aveți o aplicație Angular existentă, puteți utiliza ng nou comandă pentru a crea un nou proiect cu toate fișierele Angular necesare.
    ng nounou-aplicație-unghiulară
  2. Creeaza o noua bază de date Firebase pentru aplicația Angular conectându-vă la Firebase și urmând instrucțiunile pentru a crea un nou proiect Firebase.
  3. În noua dvs. bază de date Cloud Firestore, creați două colecții (cunoscute și ca tabele) pentru un „Produs” și un „Furnizor”. Un furnizor poate furniza mai multe produse. Fiecare produs este, de asemenea, conectat la furnizor folosind câmpul „supplierId”.
  4. Introduceți următoarele date în tabelul „Produs”. Introduceți câmpurile nume, productId și furnizorId ca șiruri. Introduceți prețul și câmpurile în stoc ca numere.
    ID document Câmpuri
    produs1
    • nume: "panglici"
    • pret: 12,99
    • Stoc: 10
    • productId: „P1”
    • furnizorId: „S1”
    produs2
    • nume: "Baloane"
    • pret: 1,5
    • Stoc: 2
    • productId: „P2”
    • furnizorId: „S1”
    produs3
    • nume: „Hârtie”
    • pret: 2,99
    • Stoc: 20
    • productId: „P3”
    • furnizorId: „S1”
    produs4
    • nume: "Masa"
    • pret: 199
    • Stoc: 1
    • productId: „P4”
    • ProviderId: „S2”
    Iată un exemplu care arată cum ar trebui să arate:
  5. Introduceți următoarele date în tabelul „Furnizor”. Introduceți toate câmpurile ca șiruri.
    ID document Câmpuri
    furnizor1
    • nume: „Furnizor de arte și meserii”
    • locație: "California, SUA"
    • furnizorId: „S1”
    furnizor 2
    • nume: „Mese uimitoare”
    • locație: „Sydney, Australia”
    • ProviderId: „S2”
    Iată cum ar trebui să arate intrarea furnizor1:
  6. Instalare unghiular/foc în aplicația dvs.
    npm i @unghiular/fire
  7. În Firebase, deschideți Setările proiectului. Faceți clic pe logo-ul colțurilor pentru a adăuga Firebase la aplicația dvs. Angular.
  8. Firebase vă va oferi detalii de configurare pe care le puteți utiliza pentru a vă conecta aplicația Angular la baza de date Firebase.
  9. Înlocuiți conținutul în medii/mediu.ts cu următorul cod. Va trebui să modificați valorile din interior firebaseConfig. Schimbați-le pentru a se potrivi cu configurația oferită de Firebase la pasul anterior.
    exportconst mediu = {
    producție: fals,
    firebaseConfig: {
    apiKey: „AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBianDlM",
    authDomain: „muo-firebase-queries.firebaseapp.com”,
    projectId: „muo-firebase-queries”,
    storageBucket: „muo-firebase-queries.appspot.com”,
    messagingSenderId: "569911365044",
    appId: "1:569911365044:web:9557bfef800caa5cdaf6e1"
    }
    };
  10. Importați mediul de sus, împreună cu modulele Angular Firebase în src/app/app.module.ts.
    import { mediu inconjurator } din „../medii/mediu”;
    import { AngularFireModule } din '@angular/fire/compat';
    import { AngularFirestoreModule } din „@angular/fire/compat/firestore”;
  11. Adăugați modulele Firebase la matricea de importuri:
    AngularFirestoreModule,
    AngularFireModule.initializeApp(mediu inconjurator.firebaseConfig)

Cum se scrie o interogare complexă Firebase într-un fișier de servicii

Puteți interoga tabele din baza de date Firebase utilizând un fișier de servicii.

  1. Creați un folder nou numit „servicii”. În interiorul folderului, creați un fișier nou numit „service.ts”.
  2. Adăugați importul, constructorul și clasa AngularFirestore în fișier.
    import { injectabil } din '@angular/core';
    import { AngularFirestore } din „@angular/fire/compat/firestore”;
    @Injectabil({
    furnizat în: 'rădăcină'
    })
    exportclasăServiciu{
    constructor(DB privat: AngularFirestore) { }
    }
  3. În acest exemplu de interogare, listați produsele pe baza numelui furnizorului. În plus, filtrați lista pentru a afișa numai articolul cu cel mai mic stoc. Deoarece Firebase nu este o bază de date rațională, va trebui să interogăm cele două tabele separate folosind mai mult de o interogare.
  4. Pentru a face acest lucru, creați o nouă funcție numită getSupplier(), pentru a gestiona prima interogare. Funcția va returna rândul din tabelul „Furnizor” care se potrivește cu numele.
    getSupplier (nume: șir) {
    întoarcerenouPromisiune((rezolvare) => {
    this.db.collection('Furnizor', ref => ref.unde('Nume', '==', nume)).valueChanges().subscribe (furnizor => rezolvare (furnizor))
    })
    }
  5. Creați o altă funcție numită getProductsFrom Supplier(). Această interogare interogează baza de date pentru Produse asociate cu un anumit furnizor. În plus, interogarea ordonează rezultatele după câmpul „inStock” și afișează doar prima înregistrare din listă. Cu alte cuvinte, va returna produsul unui anumit furnizor, cu cel mai mic număr de „în stoc”.
    getProductsFromSupplier (supplierId: șir) {
    întoarcerenouPromisiune((rezolvare) => {
    this.db.collection('Produs', ref => ref.unde('furnizorId', '==', ProviderId).orderBy('în stoc').startAt (0).limit (1)).valueChanges().subscribe (produs => rezolvare (produs))
    })
    }
  6. În src/app/app.component.ts fișier, importați serviciul.
    import { Serviciu } din 'src/app/services/service';
  7. Adăugați un constructor în interiorul clasei AppComponent și adăugați serviciul la constructor.
    constructor(serviciu privat: serviciu) { }
  8. Creați o nouă funcție numită getProductStock(). Această funcție va imprima produsul cu cel mai mic stoc oferit de un anumit furnizor. Asigurați-vă că apelați noua funcție în ngOnInit() funcția și declară o variabilă pentru a stoca rezultatul.
    produse: oricare;
    ngOnInit(): gol {
    acest.getProductStock();
    }
    asincron getProductStock() {

    }

  9. În interiorul getProductStock() funcția, utilizați cele două interogări din fișierul de servicii. Utilizați prima interogare pentru a obține înregistrarea unui furnizor pe baza numelui. Apoi, utilizați providerId-ul ca argument pentru a doua interogare, care va găsi produsul de la acel furnizor, cu cel mai mic stoc.
    lăsa furnizor = așteaptăacest.service.getSupplier('Furnizor de arte și meserii'); 
    acest.produse = așteaptăacest.service.getProductsFromSupplier (furnizor[0].supplierId);
  10. Eliminați conținutul din src/app/app.component.html fișier și înlocuiți-l cu următoarele:
    <h2> Produse cu cel mai mic stoc de la "Furnizor de arte și meserii"</h2>
    <div *ngFor="lăsați articol de produse">
    <p> Nume: {{item.name}} </p>
    <p> Număr în stoc: {{item.inStock}} </p>
    <p> Preț: ${{item.price}} </p>
    </div>
  11. Rulați aplicația într-un browser web folosind ng servi comanda.
    ng servi
  12. Deschideți-vă site-ul web folosind orice browser web. În mod implicit, Angular găzduiește aplicația la gazdă locală: 4200.
  13. Datele dvs. nu se vor afișa corect pe ecran. Faceți clic dreapta pe pagina web și faceți clic pe Inspecta pentru a deschide instrumentele de dezvoltare ale browserului dvs.
  14. Navigați la Consolă fila. Se va afișa o eroare pentru a vă anunța că interogarea va necesita un index.

Cum să creați un index compus pentru interogarea dvs

Firebase creează indecși pentru interogări care pot conține mai multe câmpuri. In conformitate cu Documentația Firebase, aceasta acționează ca o hartă, astfel încât Firebase să poată căuta locația câmpurilor conținute în interogare.

  1. În consolă, faceți clic pe linkul pe care îl afișează eroarea.
  2. Conectați-vă la contul dvs. Firebase.
  3. Se va afișa o solicitare care vă va cere să creați un index pentru interogarea Firebase. Click pe Creați index.
  4. Firebase va indexa câmpurile pe care le utilizează interogarea dvs. Așteptați câteva minute până când starea se schimbă din „Clădire” în „Activat”.
  5. Actualizează-ți browserul web. Interogarea va rula și va returna rezultatul corect pe pagina de pornire. Dacă deschideți depanatorul consolei folosind instrumentele de dezvoltare ale browserului dvs., eroarea ar trebui să nu mai existe.

Interogarea bazei de date Firebase

Firebase vă permite să creați o bază de date NoSQL în cloud. Apoi puteți integra acea bază de date în aplicațiile Angular pe care le dezvoltați. Puteți crea diferite tipuri de interogări pentru a stoca, actualiza sau șterge date. De asemenea, puteți crea o interogare care utilizează mai multe câmpuri simultan.

Când creați o interogare care utilizează mai multe câmpuri, încercarea de a o rula va produce o eroare. Va trebui să indexați combinația de câmpuri utilizate în interogare, astfel încât Firebase să o poată căuta cu ușurință ori de câte ori executați interogarea.

De asemenea, puteți afla despre alte modalități de a configura o bază de date NoSQL, cum ar fi cum să configurați o bază de date folosind MongoDB.

Cum să vă configurați propria bază de date NoSQL

Citiți în continuare

AcțiuneTweetAcțiuneE-mail

Subiecte asemănătoare

  • Programare
  • Programare
  • Bază de date

Despre autor

Sharlene Khan (38 articole publicate)

Shay lucrează cu normă întreagă ca dezvoltator de software și îi place să scrie ghiduri pentru a-i ajuta pe alții. Ea are o licență în IT și are experiență anterioară în asigurarea calității și tutorat. Shay îi place să joace și să cânte la pian.

Mai multe de la Sharlene Khan

Aboneaza-te la newsletter-ul nostru

Alăturați-vă buletinului nostru informativ pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Click aici pentru a te abona