How to get a single database value through the Angularfirestore and show your data via Observable?

Asked

Viewed 33 times

0

That would be the template 

<div>
    <form [formGroup]="animalForm" fxLayout="row">
      <mat-form-field>
        <input matInput placeholder="Microchip" formControlName="IdChip" #IdChip>
      </mat-form-field>
      <button mat-icon-button (click)="searchAnimal()" color="accent">
        <mat-icon>search</mat-icon>
      </button>
      <mat-form-field>
        <input matInput placeholder="Tutor" formControlName="Tutor">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="DataNasc" formControlName="DataNasc">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Especie" formControlName="Especie">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Nome" formControlName="Nome">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Observações" formControlName="Observacoes">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Raça" formControlName="Raca">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Tamanho" formControlName="Tamanho">
      </mat-form-field>
    </form>
  </div>

This is the Component.ts

import { Component, OnInit } from '@angular/core';
import { AnimaisService } from '../shared/animais.service';
import { MatSnackBar } from '@angular/material';
import { iAnimais } from '../models/animais.model';
import { Observable } from 'rxjs';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-animais',
  templateUrl: './animais.component.html',
  styleUrls: ['./animais.component.css']
})
export class AnimaisComponent implements OnInit {

  animal$: Observable<iAnimais[]>;

  animalForm = this.fb.group({
    IdChip: ['', [Validators.required]],
    Tutor: ['', [Validators.required]],
    DataNasc: ['', [Validators.required]],
    Especie: ['', [Validators.required]],
    Nome: ['', [Validators.required]],
    Observacoes: ['', [Validators.required]],
    Raca: ['', [Validators.required]],
    Tamanho: ['', [Validators.required]],
    Ocorrencias: ['']
  })


  constructor(
    private fb: FormBuilder,
    private snackBar: MatSnackBar,
    private animaisService: AnimaisService,
  ) { }

  ngOnInit() {

  }

  searchAnimal() {
    this.animal$ =
      this.animaisService.getAnimal(this.animalForm.value.IdChip);
    console.log(this.animal$);
    console.log('Setando formulario')
    this.animalForm.setValue(this.animal$);

  }

And the code that I use to fetch the data in Firebase is through the service is this:

getAnimal(IdChip: String): Observable<iAnimais[]> {
    return this.afs.collection<iAnimais>('animais',
      ref => ref.limit(1).where('IdChip', '==', IdChip))
      .valueChanges();
}

What I was able to identify is that getAnimal() is returning an undefined value.

angular typescript firebase firestore

1 answer

-1

async searchAnimal() {
    this.animal$ = await
      this.animaisService.getAnimal(this.animalForm.value.IdChip);
    console.log(this.animal$);
    console.log('Setando formulario')
    this.animalForm.setValue(this.animal$);

  }

Browser other questions tagged angular typescript firebase firestore

You are not signed in. Login or sign up in order to post.