Автоматическое обновление вида с помощью Observable

Question

Я использую наблюдаемый и HTTP-запрос, чтобы добавить данные на сервер, а затем обновить другой маршрут.

Я хотел бы, чтобы эти данные обновлялись мгновенно. На самом деле я должен обновить страницу, чтобы получить новые данные

В моем сервисе я использую AddProj() а также getAllProj() функции для получения и отправки данных

service.ts

import { Injectable } from "@angular/core";
import { NouveauProjet } from "./models/nouveau-projet";
import { HttpClient, HttpResponse } from "@angular/common/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch";

@Injectable()
export class AjoutprojService {
  apiURL = "http://127.0.0.1:8080/api/proj/projets";
  constructor(private http: HttpClient) {}

  getAllProj(): Observable<NouveauProjet[]> {
    return this.http.get<NouveauProjet[]>(
      "http://127.0.0.1:8081/api/proj/projets"
    );
  }
  addProj(nouveauProjet: NouveauProjet): Observable<any> {
  return this.http.post<NouveauProjet[]>(
    "http://127.0.0.1:8081/api/proj/projets",
    nouveauProjet
  );
}
}

в ajoutproj.ts ставлю данные с addProjet()

addProjet() {
  this.nouveauProjet = {
    ...this.firstFormGroup.value,
    ...this.secondFormGroup.value,
    ...this.thirdFormGroup.value
  };
  this.ajoutProj
    .addProj(this.nouveauProjet)
    .toPromise()
    .then(res => {
      console.log(res.message);
    });
}

в моем файле listprojects.ts я получаю данные, используя getAllProj()

import { Component, OnInit } from "@angular/core";
import { MatTableDataSource } from "@angular/material";
import { AjoutprojService } from "../ajoutproj.service";
import { NouveauProjet } from "../models/nouveau-projet";

@Component({
  selector: "app-liste-projets",
  templateUrl: "./liste-projets.component.html",
  styleUrls: ["./liste-projets.component.css"]
})
export class ListeProjetsComponent implements OnInit {
  constructor(private ajoutProj: AjoutprojService) {}
  nouveauProjet: NouveauProjet[];
  stateExression: string = "inactive";

  ngOnInit() {
    this.getAllProj();
  }
  displayedColumns = ["Nom projet", "Lead Projet", "effectif"];
  dataSource = new MatTableDataSource<NouveauProjet>(this.nouveauProjet);

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  getAllProj() {
    this.ajoutProj.getAllProj().subscribe(
      response => {
        this.dataSource = new MatTableDataSource<NouveauProjet>(response);
      },
      error => console.log(error)
    );
  }

}

Обновление я добавляю свой шаблон:

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="Nom projet">
      <mat-header-cell *matHeaderCellDef> Nom projet </mat-header-cell>
      <mat-cell *matCellDef="let nouveauProjet"> {{nouveauProjet.nomProj }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Lead Projet">
      <mat-header-cell *matHeaderCellDef> Lead Projet </mat-header-cell>
      <mat-cell *matCellDef="let nouveauProjet"> {{nouveauProjet.leadProj }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="effectif">
      <mat-header-cell *matHeaderCellDef> effectif </mat-header-cell>
      <mat-cell *matCellDef="let nouveauProjet"> {{nouveauProjet.pers.length }} </mat-cell>
    </ng-container>



    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

Обновление 2: Я сделал репозиторий stackblitz, я не могу воспроизвести серверную часть, просто передняя сторона

У меня нет ошибки, но моя проблема в том, что данные не обновляются автоматически. Я должен обновлять свою страницу каждый раз, чтобы получать новые изменения, зная, что я использую Obersables. что я забыл?

Answer 1

Для подписки Obersables и возврата последнего значения, которое он испустил, вы можете попробовать использовать AsyncPipe

Асинхронный канал подписывается на Observable или Promise и возвращает последнее выданное им значение. Когда выдается новое значение, асинхронный канал помечает компонент, который необходимо проверить на наличие изменений. Когда компонент уничтожается, асинхронный канал автоматически отписывается, чтобы избежать возможных утечек памяти.