1

Tengo un arreglo que se incializa de lo que traiga de Firebase, el cual pinto en el main con ngFor. Cuando me dirijo a otro componente y regreso al main el arreglo ya no se vuelve a llenar

import { CarInterface } from './../../models/car';
import { CarService } from './../../services/car.service';
import { AuthService } from './../../services/auth.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

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

  isLogged: boolean;
  user: string;
  cars: CarInterface[]; // este es el arreglo que se limpia cada vez que cambio de componente

  constructor(
    private authService: AuthService,
    private carService: CarService,
    private router: Router
  ) { 

  }

  ngOnInit() {
    this.getCars();
  }

  getCars() {
    this.carService.getCars().subscribe(cars => {
      this.cars = cars;
      console.log('cars::',this.cars);
    });
  }

  logout() {
    this.authService.logout();
    this.router.navigate(['login']);
  }
}
<app-navbar></app-navbar>
<div class="container">
  <button class="btn btn-primary float-right my-4" data-toggle="modal" data-target="#newCar"> 
    New car
    <i class="fa fa-plus"></i>
  </button>

  <a class="btn btn-primary" routerLink="/tickets">Tickets</a>

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th scope=col>#</th>
      <th scope=col>Car</th>
      <th scope=col>Model</th>
      <th scope=col>Total of mounth</th>
      <th scope=col>Total annual</th>
      <th scope=col>Options</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let car of cars; index as i">
      <tr routerLink="/tickets/{{ car.plate }}">
        <td>{{ i + 1 }}</td>
        <td>{{ car.brand }}</td>
        <td>{{ car.model }}</td>
        <td>{{ car.id }}</td>
        <td></td>
        <td></td>
      </tr>
    </ng-container>
  </tbody>
</table>

</div>

<app-modal-newcar></app-modal-newcar>

import { CarInterface } from './../models/car';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';


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

  carsCollections: AngularFirestoreCollection<CarInterface>;
  cars: Observable<CarInterface[]>;

  constructor(private afs: AngularFirestore) { 
    this.carsCollections = this.afs.collection<CarInterface>('cars');
    this.cars = this.carsCollections.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as CarInterface;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );    
  }

  getCars() {    
    return this.cars;
  }

  getCar(id: string) {
    return this.carsCollections.doc<CarInterface>(id).valueChanges();
  }

  addCar(car: CarInterface) {
    return this.carsCollections.add(car);
  }

  updateCar(car: CarInterface) {
    return this.carsCollections.doc(car.id).update(car);
  }

  deleteCar(id: string) {
    return this.carsCollections.doc(id).delete();
  }
}

5
  • 2
    Hola,puede que te interese leer esto Recorrido, puede tratar de mejorar su pregunta mirando este link Cómo preguntar, trata de mostrar lo que llevas para que te puedan ayudar . Saludos. el 11 mar. 2019 a las 15:14
  • 1
    Sólo viendo el código del componente, pero no cómo lo usas, es complicado saberlo. Tiene pinta de que este componente no se destruye y ngOnInit sólo se llama una vez el 11 mar. 2019 a las 15:53
  • @PabloLozano, al dar clic en el <tr> me dirige a otro componente y cuando regreso de ese componente la lista queda vacía. Efectivamente, pinta a que ngOnInit sólo se llama una vez
    – Manuel
    el 11 mar. 2019 a las 16:54
  • Hola Manuel, podrías de pronto subir el servicio denominado private carService: CarService y lo que tienes en el valor dirigod hacia el componente routerLink="/tickets/{{ car.plate }}"
    – jecorrales
    el 11 mar. 2019 a las 19:59
  • Que tal @jecorrales acabo de subir el service, el valor dirigido es un string "ert-4256"
    – Manuel
    el 12 mar. 2019 a las 14:40

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.