javascript - Angular - 当 observable 完成时，做一些事情

Question

我有一个由两部分组成的流程。

组件 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);
    }

}

问题:

在 组件 2 中，我试图检查何时取回数据，以便我可以在该组件中执行其他操作。不过，我似乎还没有完成可观察的部分。

关于我做错了什么有什么想法吗？

Answer 1

问题的第一部分在于这个片段:

this._massEmpService.importedResults
.subscribe(
    data => {
        this.searchResults.push(...data);
        console.log('I made it here');
    },
    () => {
        console.log('.. but not here');
    }
);

您传递的第二个回调用于错误通知 - 而不是完成通知。您将需要传递一个额外的回调来处理完成通知。

问题的第二部分是 importedResults 是一个 Subject，因此在调用其 complete 方法之前不会完成。片段中没有任何迹象表明您正在调用该方法。