如何在POST后刷新angular 6上的可观察项

Question

我有一个显示票证信息的表，用户可以添加新票证并将其发送到后端。问题是，该表没有用用户添加的新票证更新，其他用户和用户自己必须始终刷新页面才能显示

插入新票证后，我如何强制更新可观察项？

这是代码。对于ADD组件

import { Component, OnInit } from '@angular/core';
import { AddService } from '../../services/add.service';
import { Client, Product, ListTracker } from '../../list';
@Component({
selector: 'app-add',
templateUrl: './add.component.html',
styleUrls: ['./add.component.css']
})
export class AddComponent implements OnInit {
public client_data = [];
public product_data = [];
public errorMsg;
form = {
title: '',
client_pk: '',
product_pk: '',
severity: '',
desc: '',
res: '',
email: ''
};
constructor(private addService: AddService) {
}
ngOnInit() {
this.getClient();
this.getProduct();
}
getClient() {
this.addService.getClient()
.subscribe(data => this.client_data = data,
error => this.errorMsg = error);
}
getProduct() {
this.addService.getProduct()
.subscribe(data => this.product_data = data,
error => this.errorMsg = error);
}
onSubmit() {
this.addService.addTicket(this.form).subscribe();
}
}

这是到后端的ADD服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Client, Product,ListTracker } from '../list';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable({
providedIn: 'root'
})
export class AddService {
constructor(private http: HttpClient) {
}
getClient(): Observable<Client[]> {
return this.http.get<Client[]>('http://localhost:3000/api/v1/inuka/getClient')
.catch(this.errorHandler);
}
getProduct(): Observable<Product[]> {
return this.http.get<Product[]>('http://localhost:3000/api/v1/inuka/getProduct')
.catch(this.errorHandler);
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error.message || "Server Error");
}
addTicket(form):Observable<ListTracker[]> {
return this.http.post<ListTracker[]>('http://localhost:3000/api/v1/inuka/addTicket', form)
.catch(this.errorHandler);
}
}

这是列表组件

import { Component, OnInit } from '@angular/core';
import { ListService } from '../../services/list.service';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
public list_data = [];
public errorMsg;
constructor(private listService:ListService) { 
}
ngOnInit() {
this.listService.getAllTrackerData()
.subscribe(data => this.list_data = data,
error => this.errorMsg = error);
}
}

这是列表服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ListTracker } from '../list';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable({
providedIn: 'root'
})
export class ListService {
constructor(private http: HttpClient) {
}
getAllTrackerData(): Observable<ListTracker[]> {
return this.http.get<ListTracker[]>('http://localhost:3000/api/v1/inuka/getAllTrackerData')
.catch(this.errorHandler);
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error.message || "Server Error");
}
}

Answer 1

Hi@ritaj请参阅代码

对于列表服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { AddService } from './add.service';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ListTracker } from '../list';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable({
providedIn: 'root'
})
export class ListService {
constructor(private http: HttpClient,addService:AddService) {
}
getAllTrackerData(): Observable<ListTracker[]> {
return this.http.get<ListTracker[]>('http://localhost:3000/api/v1/inuka/getAllTrackerData')
.catch(this.errorHandler);
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error.message || "Server Error");
}
**addTicket(form):Observable<ListTracker[]> {
return this.http.post<ListTracker[]>('http://localhost:3000/api/v1/inuka/addTicket', form)
.pipe(tap(() => this.addService.getAllTrackerData()))
.catch(this.errorHandler);
}**
}

对于AddService

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ListTracker,Client,Product } from '../list';
import { map } from 'rxjs/operators';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable({
providedIn: 'root'
})
export class AddService {
constructor(private http: HttpClient) {
}
getClient(): Observable<Client[]> {
return this.http.get<Client[]>('http://localhost:3000/api/v1/inuka/getClient')
.catch(this.errorHandler);
}
getProduct(): Observable<Product[]> {
return this.http.get<Product[]>('http://localhost:3000/api/v1/inuka/getProduct')
.catch(this.errorHandler);
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error.message || "Server Error");
}
addTicket(form):Observable<ListTracker[]> {
return this.http.post<ListTracker[]>('http://localhost:3000/api/v1/inuka/addTicket', form)
.catch(this.errorHandler);
}
getAllTrackerData(): Observable<ListTracker[]> {
return this.http.get<ListTracker[]>('http://localhost:3000/api/v1/inuka/getAllTrackerData')
.catch(this.errorHandler);
}
}

我也做了一些小测试。我觉得我做错了。用**标记那个有错误。

[ts]
Type 'Observable<{}>' is not assignable to type 'Observable<ListTracker[]>'.
Type '{}' is not assignable to type 'ListTracker[]'.
Property 'includes' is missing in type '{}'.

这是清单.ts

export interface ListTracker {
details: any[],
pk: number,
date_created: string,
client_name: string,
product_name: string
}