Home / Questions / 260828
Accepted
Alberto Julio Arce Escolar
Asked: 2020-05-05 16:20:04 +0800 CST 2020-05-05 16:20:04 +0800 CST

如何以角度重新加载内容

  • 772

我有一个显示标题和描述的新闻。碰巧这需要数据库并显示它。当我删除或添加内容时，如果我直接从数据库添加或修改新闻，我必须更改路线才能欣赏更改。知道如何在视觉上更新吗？

服务

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);
  }

}

TS组件

export class NoticiasComponent implements OnInit {

  noticia=null;

  constructor(private http:NoticiasService) { }

  ngOnInit() {
    this.obtenernoticias()
  }

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

}

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>

在这里，我在您以 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()))
  }

}

你能或多或少地向我解释一下 pipe 和 switchMap 是做什么的吗？

angular

1 Answers

  1. Best Answer

    你有三个选择：

    1) 异步管道和 Observables

    在这种情况下，您必须创建一个可观察的类型变量，该变量向您的后端发出持续请求

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

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

    在您的模板中应用管道异步

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

    2) 插座

    在这里你必须修改你的后端并实现一个允许处理套接字的库，socket.io 目前被广泛使用。

    3) 火力基地

    一个快速的解决方案是使用 firebase，它速度很快，不需要太多配置，对于 angular 客户端，您无需做任何事情。

    • 2