角度 - 観測可能なものが完了したら、何かをしてください

Question

私は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で、私はそのコンポーネントで何か他のことを行うことができるようにデータを取得するときにチェックしようとしています。私は観察可能な部分の完成した部分に到達するようには思われません。

私は何を間違えていると思いますか？

Answer 1

問題の最初の部分は、このスニペットである：

​​

あなたが渡している2番目のコールバックは、エラー通知のためである - ない完了通知。完了通知を処理するには、追加のコールバックを渡す必要があります。

問題の2番目の部分は、importedResultsがSubjectであるため、completeメソッドが呼び出されるまで完了しません。スニペットには、そのメソッドを呼び出すという指示はありません。