開機自檢后如何刷新角度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();
  }
}

這是向后端添加服務

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

嗨@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 '{}'.

這是list.ts

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