我有两个组件(兄弟姐妹)。我还定义了一个负责与我的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();
});
}
}
dashboard.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;
});
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;
}