1

yo tengo una noticias donde muestro un titulo y una descripcion. pasa que esta la toma de la db y la muestra. cuando borro o agrego un contenido me toca cambiar de ruta para poder apreciar el cambio de si agregue o modifique noticia desde la db directamente. Alguna idea de como actualizar visualemente tambien ?

Servicio

export class NoticiasService {

  constructor(private http:HttpClient) {}

  headers: HttpHeaders = new HttpHeaders({
    "Content-Type": "application/json"
  });

  mostrarnoticias() {
    const url_api = "http://localhost/apixeoms/mostrarnoticias.php";
    return this.http.get(url_api);
  }

}

Componente TS

export class NoticiasComponent implements OnInit {

  noticia=null;

  constructor(private http:NoticiasService) { }

  ngOnInit() {
    this.obtenernoticias()
  }

  obtenernoticias() {
    this.http.mostrarnoticias().subscribe(
      data =>  this.noticia=data
    );
  }

}

Componente Html

<div class="container" style="background:blue;" *ngFor="let noticia of noticia">
<div class="row">
  <div class="col-md-12" >
     <p style="text-align:center;">{{noticia.titulo}}</p>
     <p>{{noticia.contenido}}</p>
  </div>
</div>
</div>

Aqui lo hice con la ayuda que me brindaste en angular 7

import { Component, OnInit } from '@angular/core';
import {NoticiasService} from '../service/noticias.service';
import { Observable } from "rxjs/internal/Observable";
import { interval } from 'rxjs';
import { switchMap } from 'rxjs/operators'; 
import {map} from 'rxjs/operators';


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

  noticias$: Observable<any>;


  constructor(private http: NoticiasService) { }

  ngOnInit() {
    this.noticias$ = interval(1000).pipe(
      switchMap(() => this.http.mostrarnoticias()))
  }

}

me podrias mas o menos explicar que funcion hace el pipe y el switchMap ?

1 respuesta 1

2

tienes tres opciones:

1) Async Pipe & Observables

En este caso debes crear una variable de tipo observable que realice peticiones constantes a tu backend

 products: Observable<any>;
  constructor(private api: ApiService) { }

  ngOnInit() {
    this.products = Observable
      .interval(1000)
      .startWith(0).switchMap(() => this.api.getProducts());
  }

en tu plantilla aplica el pipe async

<ul>
  <li *ngFor="let product of products | async">{{ product.prod_name }} for {{ product.price | currency:'£'}}</li>
</ul>

2) Sockets

Aqui debes modificar tu backend e implementar alguna libreria que permita el manejo de sockets actualmente es muy usada socket.io

3) Firebase

Una solucion rapida es usar firebase, es rapido y no necesita mucha configuracion, en cuanto al cliente de angular no hay que hacerle nada.

7
  • la interval no me la reconoce. cual de las tres es la mejor opcion ? Commented el 6 may. 2019 a las 20:33
  • Hola, las importaciones deben ser de 'rxjs/add/observable/*'; , la mejor opcion seria la No 2 si cuentas con los conocimientos y tienes control del backend, si son pruebas y queres algo rapido usa firebase
    – Alejandro
    Commented el 6 may. 2019 a las 21:31
  • ya le puse la importacion y me da error Commented el 6 may. 2019 a las 21:48
  • import { Observable } from "rxjs/internal/Observable"; como tengo esta no me deja colocar la otra Commented el 6 may. 2019 a las 21:49
  • intenta con import { interval } from 'rxjs'; revisa la documentacion segun la version de angular que tengas
    – Alejandro
    Commented el 6 may. 2019 a las 22:04

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.