2

我有两个组件（兄弟姐妹）。我还定义了一个负责与我的 api 交互的服务。但是，在我对一个组件进行更改之后，我希望这些更改也会反映在我的另一个组件中。但是，由于某种原因，这似乎并没有发生。我想弄清楚我是否遗漏了什么。我正在尝试调用 model.component.ts 中的 onCommit() 函数，该函数通过 graphql 突变推送数据。由于数据更改，客户端调用了 graphql 订阅，但是 dashboard.component.ts 没有反映这一点。但是，刷新仪表板视图后，我可以看到更改。

难道我做错了什么？

模型-service.service.ts

  import { Injectable } from '@angular/core';
  // import { DEMO_MODELS } from './mock-models';

  import { urlsObject } from '../../config/urls';
  import { Observable } from 'rxjs/Rx';
  // import {asObservable} from "./asObservable";
  import { Subject } from 'rxjs/Subject';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import 'rxjs/add/operator/toPromise';

  import gql from 'graphql-tag';
  import { Apollo } from 'apollo-angular';

  import {
    ModelClass
  } from './models/model-class';

  import {
    userModelsQuery,
    userModelsQueryResponse,
    createNewModelMutation
  } from './queries/userModels';

  @Injectable()
  export class ModelService {
    private _models: BehaviorSubject<ModelClass[]>;

    constructor(private apollo: Apollo) {
      this.loadInitialData();
      this.monitorData();
      this._models = <BehaviorSubject<ModelClass[]>>new BehaviorSubject([]);
    }

    get models() {
      return this._models.asObservable();
    }

    monitorData() {
      this.apollo.subscribe({
        query: gql`
          subscription {
            getModelChanges{
              _id
              name
              type
              train_status
              deploy_status
              data_path
              description
              created_at
              updated_at
            }
          }
        `
      }).subscribe((data) => {
        this._models.next(data.getModelChanges);
      })
    }

    loadInitialData() {
      this.apollo.watchQuery<userModelsQueryResponse>({
        query: userModelsQuery
      }).subscribe(({data}) => {
        this._models.next(data["getUserModels"]);
      });
    }

    createNewModel(temp: any){
      this.apollo.mutate({
        mutation: createNewModelMutation,
        variables: {
          model: temp
        }
      }).subscribe(({data}) => {
        console.log('Mutation Response: ' + JSON.stringify(data));
        // this.getModels();
        this.loadInitialData();
      });
    }
  }

仪表板.component.ts

  ngOnInit() {
  this.apollo.watchQuery<initStatusQueryResponse>({
    query: initStatusQuery
  }).subscribe(({data}) => {
    this.coldStart = data["getInitStatus"].cold_start;
  });

  this.models = this.modelservice.models;

  this.apollo.subscribe({
    query: gql`
      subscription {
        getModelChanges{
          _id
          name
          type
          train_status
          deploy_status
          data_path
          description
          created_at
          updated_at
        }
      }
    `
  }).subscribe((data) => {
    console.log("DASHBOARD UPDATE");
    console.log("CREATED: " + JSON.stringify(data.getModelChanges));

    this.models = this.modelservice.models;
  });

模型.component.ts

  onCommit(b: boolean): void {
    this.wizardCommitBool = b;
    if (this.wizardCommitBool == true){
    console.log("SUBMITTING: " + JSON.stringify(this.temp_new_ml_model));
    this.modelservice.createNewModel(this.temp_new_ml_model);
    }
  }

  constructor(
    private router: Router,
    private modelservice: ModelService,
    private route: ActivatedRoute,
    private location: Location,
    private initService: InitService,
    private reversePipe: ReversePipe,
    private apollo: Apollo
  ) {}

  ngOnInit() {
    this.models = this.modelservice.models;
  }
4

0 回答 0