從Angular2服務返回空的Observable

Question

我正在構建一個Angular 2應用程序，它使用服務來收集數據。 的服務不包含以下邏輯：

/* ========== CORE COMPONENTS ========== */ 
import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

/* ========== MODELS ========== */ 
import { IApplicationViewModel } from './models/application.model'; 

/* ========== CONSTANTS ========== */ 
import { LogzillaServerConfiguration } from '../../app.configuration'; 

@Injectable() 
export class ApplicationService { 
    private getAllEndpoint = LogzillaServerConfiguration.host + '/api/administration/application/getAll'; 

    // Initializes a new instance of the 'ApplicationService'. 
    constructor(private http: Http) { } 

    // Get all the 'logzilla' applications. 
    getApplications(): Observable<IApplicationViewModel[]> { 
     return this.http.get(this.getAllEndpoint) 
      .map((response: Response) => <IApplicationViewModel[]>response.json().model) 
      .catch(this.handleError); 
    } 

    // Handle an error that occured while retrieving the data. 
    // This method will throw an error to the calling code. 
    private handleError(error: Response) { 
     return Observable.empty(); 
    } 
} 

這是什麼服務所做的是從端點檢索數據，並將其映射到一個模型中，當確實發生了錯誤，我返回一個空Observable。

我還有一個解析器，用於在活動路由更改之前從服務中加載數據。 此解析器不包含以下邏輯：

/* ========== CORE COMPONENTS ========== */ 
import { Injectable } from '@angular/core'; 
import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; 

/* ========== APPLICATION SERVICES ========== */ 
import { ApplicationService } from './application.service'; 

/* ========== MODELS ========== */ 
import { IApplicationViewModel } from './models/application.model'; 
import { IApplicationLogLevel } from './models/applicationLevel.model'; 

// Defines the 'resolver' which is used to resolve the applications. 
@Injectable() 
export class ApplicationResolver implements Resolve<IApplicationViewModel[]> { 

    // Initializes a new instance of the 'ApplicationResolver'. 
constructor(private applicationService: ApplicationService) { } 

// Get all the registered applications. 
resolve(route: ActivatedRouteSnapshot) { 
    return this.applicationService.getApplications(); 
} 
} 

我的路線的定義是：

{ path: 'applications', component: ApplicationComponent, pathMatch: 'full', resolve: { 
      application: ApplicationResolver 
     }}, 

然而，當我瀏覽到/applications，我有錯誤Uncaught (in promise): Error: no elements in sequence.迎接。

編輯：增加的分量

@Component({ 
    selector: 'logzilla-applications', 
    templateUrl: './src/app/pages/applications/application.template.html' 
}) 
@Injectable() 
export class ApplicationComponent implements OnInit { 
    hasApplications: boolean; 
    applications: IApplicationViewModel[]; 
    errorMessage: string; 

    // Initializes a new instance of the 'ApplicationComponent'. 
    constructor (private route: ActivatedRoute) { 
     console.log('I am here.'); 
    } 

    // This method is executed when the component is loaded. 
    ngOnInit() { 

    } 

我的組件的構造是不叫事件。 這怎麼解決。

此致

Answer 1

將Observable.empty()替換爲Observable.of([])。 of優於empty是官方的Angular Tour of Heroes教程用來返回一個空的可觀察對象，這是我一直使用的所有應用程序。

他們之間的區別似乎是沒有什麼被返回，或者是一個空的數組。

從官方rxjs文檔：

Observable.empty()

創建一個可觀察到發射任何項目的觀察員，並立即發出完成通知。

Observable.of()

創建一個可觀察到發射指定的其他後一個作爲參數，一些值，然後發出完成通知。

Answer 2

解析器嘗試訂閱給定的觀察到的，通過可觀測序列與組分（實際上是ActivatedRoute對象）的所述第一結果。

但是因爲您的Observable在發出結果之前觸發完成的事件，所以解析器不會得到結果。所以這就是你的錯誤來自哪裏。

您必須退還Observable.of(null)或Observable.of([])或類似的東西。 然後您可以處理組件中的空輸入。

This頁面中包含有關Observable.empty()函數的更多信息。