4

Hola estoy intentando añadir unas directivas a un formulario para poder enviarlos, pero cuando coloco la directiva [(ngModel)]="tareaService.TareaSeleccionada.nombre" me salta este error.

ERROR Error: StaticInjectorError(AppModule)[TareaService -> AngularFireDatabase]: 
  StaticInjectorError(Platform: core)[TareaService -> AngularFireDatabase]: 
    NullInjectorError: No provider for AngularFireDatabase!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8376)
    at _createClass (core.js:8421)
    at _createProviderInstance (core.js:8393)

El objeto "tareaService" lo declaré en el componente y lo importé en el app.module.ts así que no habría problema por ese lado, es curioso también porque aunque borre el formulario el error sigue, así que el error no es en el formulario sino que puede ser en el componente o el servicio, aquí los añado:

SERVICIO

   import { Injectable } from '@angular/core';
import { AngularFireDatabase,AngularFireList } from 'angularfire2/database';

// Clase
import { Tarea } from '../clases/tarea';

@Injectable({
  providedIn: 'root'
})
export class TareaService {

  ListaTareas: AngularFireList <any>;
  TareaSeleccionada:Tarea= new Tarea();
  constructor(private firebase: AngularFireDatabase) { }

  ListarTareas(){
    return this.ListaTareas=this.firebase.list('tareitas');
  }

  InsertarTarea(tarea:Tarea){
    this.ListaTareas.push({
      nombre:tarea.nombre
    })
  }

  ActualizarTarea(tarea:Tarea){
    this.ListaTareas.update(tarea.$key,{
      nombre:tarea.nombre
    })
  }

  EliminarTarea($key: string){
    this.ListaTareas.remove($key);
  }
}

COMPONENTE

    import { Component, OnInit } from '@angular/core';
import { NgForm} from '@angular/forms';
// Servicios
import { TareaService } from '../../../servicios/tarea.service';
import { Tarea } from '../../../clases/tarea';

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

  constructor(private tarea: TareaService) { }

  ngOnInit() {
  }

  // reiniciarFormuario(formulario: NgForm){
  //   if(formulario!=null){
  //     formulario.reset();
  //     this.tareaService.TareaSeleccionada=new Tarea();
  //   }
  // }

}
3
  • Hola, aclara tu problema específico y añade detalles adicionales para destacar con exactitud lo que necesitas. Por la forma en que está escrito, es difícil determinar exactamente lo que quieres preguntar. Visita la página y realiza el tour o recorrido y lee sobre Cómo preguntar para obtener ayuda sobre cómo aclarar esta pregunta.
    – jecorrales
    Commented el 24 ago. 2018 a las 15:21
  • Listo amigo, ya lo hice, puedes volver a leer Commented el 24 ago. 2018 a las 15:36
  • Entonces, tu error solo surge cuando haces uso de la directiva de [(ngModel)]="tareaService.TareaSeleccionada.nombre" ?
    – jecorrales
    Commented el 24 ago. 2018 a las 15:49

1 respuesta 1

0

No es un problema de tu directiva. El error real es:

NullInjectorError: No provider for AngularFireDatabase!

Lo que significa que no estás inicializando AngularFire2 y AngularFireDatabase de la manera correcta.

Las instrucciones de configuración (en inglés) indican que debes ingresar en tu AppModule las configuraciones de tu proyecto de Firebase, además de agregar el AngularFireDatabaseModule. Te quedaría algo como:

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase) // en donde estan tus llaves de firebase
    AngularFireDatabaseModule,
    // Otros modulos que necesités...
    // AngularFireAuthModule,
    // el resto de tu AppModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

De ésta manera tu TareaService tendrá acceso al provider de AngularFireDatabase.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.