Question

我有一个显示票证信息的表，用户可以添加新票证并将其发送到后端。问题是该表未使用该用户添加的新票证进行更新，并且其他用户和该用户本身必须始终刷新页面以使其显示

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

这是代码。用于添加组件

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

这是列表。ts

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

开机自检后如何刷新角度6上的可观察对象

1 个答案: