我正在处理一个2部分的流程。
组件1 允许我导入用户名列表并将其提交给服务。该服务然后返回我在组件2 中使用的用户个人资料数据。
我的问题是,当我从我订阅的观察者那里收到数据时,我正在尝试做某事,但它似乎没有被解雇。
组件1:
import { Component, EventEmitter, NgModule, OnInit, Output } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MassEmpService } from "app/mass-change/shared/mass.service";
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-import-list',
templateUrl: './import-list.component.html',
styleUrls: ['./import-list.component.css'],
})
export class ImportListComponent implements OnInit {
// Define the data types used for the import list
importForm: FormGroup;
message: {};
error: string;
constructor(
private fb: FormBuilder,
private _massEmpService: MassEmpService
) {
}
ngOnInit() {
this.createForm();
}
// Generate the form
createForm() {
this.importForm = this.fb.group({
dataType: ['-1', Validators.required],
data: ['', Validators.required]
});
}
// Process the data for the form
onProccess(data) {
// Define our vars
let i: number;
const dat: string = data.data.split('\n');
const dataType: string = data.dataType;
const validArray = [];
const invalidArray = [];
// Loop over each line
for (i = 0; i < dat.length; i++) {
// Validate our data point
if (this.validateData(dataType, dat[i])) {
validArray.push(dat[i]);
} else {
invalidArray.push(dat[i]);
}
}
// Do we have any invalid data?
if (invalidArray.length) {
this.renderMessage('danger', 'fa-warning', 'Oops! Please check for invalid data.', false);
} else {
// Receive the data based on the imported criteria.
this._massEmpService.processImport(dataType, validArray)
.subscribe(
data => { this._massEmpService.fetchImportedResults(data); },
error => { this.error = error.statusText; }
);
}
}
... Other Code Here ...
}
组件2:
export class EmployeeSelectionComponent implements OnInit {
// Define our search results
public searchResults: ImportResults[] = [];
constructor(
private _massEmpService: MassEmpService
) {
}
ngOnInit() {
this.fetchData();
}
fetchData() {
// Push our results to the array if they don't already exist
this._massEmpService.importedResults
.subscribe(
data => {
this.searchResults.push(...data);
console.log('I made it here');
},
() => {
console.log('.. but not here');
}
);
}
}
服务
import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { RouterLink } from '@angular/router';
import { FrameworkService } from '@aps/framework';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class MassEmpService {
// API URL
baseUrl = 'https://internal/api';
// Define the token headers for the service calls
headers: Headers = new Headers({
"Authorization": this._frameworkService.getSessionInfo().token
});
// Create a subject to observe the results and changes over time
public importedResults = new Subject<any>();
public transitionFields = new Subject<any>();
constructor(
private _http: Http,
private _frameworkService: FrameworkService
) { }
// Given a dataset, return the users based on data points submitted
processImport(dataType, dataSet): Observable<any> {
return this._http.post(this.baseUrl + '/fetchEmployeesFromImport', { "dataType": dataType, "data": dataSet }, { "headers": this.headers })
.map((result: Response) => result.json())
.share()
.catch(this.handleError);
};
// Pass the data received from the import process through our subject to observe
fetchImportedResults(data){
this.importedResults.next(data);
}
}
问题:
在component 2
中,我正在尝试检查何时获取数据,以便我可以在该组件中执行其他操作。我似乎没有达到观察的完整部分。
关于我做错了什么的想法?
答案 0 :(得分:4)
问题的第一部分在于此片段:
this._massEmpService.importedResults
.subscribe(
data => {
this.searchResults.push(...data);
console.log('I made it here');
},
() => {
console.log('.. but not here');
}
);
您传递的第二个回调是错误通知 - 而不是完成通知。您需要传递一个额外的回调来处理完成通知。
问题的第二部分是importedResults
是Subject
,因此在调用complete
方法之前不会完成。在这些片段中没有任何迹象表明您正在调用该方法。