输入'Observable< {}>不可分配给“可观察"类型 [英] Type 'Observable<{}> is not assignable to type 'Observable'

问题描述

作为序言:我知道还有很多其他问题也有同样的错误，但我似乎仍然无法弄清楚自己的问题.

To preface: I know there are a ton of other questions with this exact same error, but I still can't seem to figure out my own.

我有一个简单的服务和另一个简单的组件.我正在尝试非常接近angular2英雄教程，这是我的代码:

I have a simple service, and another simple component. I'm trying to follow the angular2 hero tutorial very closely, here is my code:

location.ts

export class Location {
    name: string;
    type: string;
    c: string;
    zmw: string;
    tz: string;
    tzs: string;
    l: string;
    ll: string;
    lat: string;
    lon: string;
}

location-search.service.ts

import { Injectable }       from '@angular/core';
import { Http, Response }   from '@angular/http';
import { Observable }       from 'rxjs';

import { Location }         from './location';

@Injectable()
export class LocationSearchService {
    constructor(private http: Http) {}

    search(term: string): Observable<Location[]> {
        return this.http
            .get(`api_url_i've_removed`)
            .map((r: Response) => r.json().data as Location[]);
    }
}

location-search.component.ts

import { Component, OnInit }    from '@angular/core';
import { Router }               from '@angular/router';
import { Observable }           from 'rxjs/Observable';
import { Subject }              from 'rxjs/Subject';

import { LocationSearchService }    from './location-search.service';
import { Location }                 from './location';

@Component({
    selector: 'location-search',
    templateUrl: 'location-search.component.html',
    styleUrls: ['assets/styles.css'],
    providers: [ LocationSearchService ]
})

export class LocationSearchComponent implements OnInit {
    locations: Observable<Location[]>;
    private searchTerms = new Subject<string>();

    constructor(
        private locationSearchService: LocationSearchService,
        private router: Router) {}

    search(term: string): void {
        this.searchTerms.next(term);
    }

    ngOnInit(): void {
        this.locations = this.searchTerms // <- ERROR HERE
            .debounceTime(300)
            .distinctUntilChanged()
            .switchMap(term => term
                ? this.locationSearchService.search(term)
                : Observable.of<Location[]>([]))
            .catch(error => {
                console.log(error);
                return Observable.of<Location[]>([]);
            })
    }
}

我不断收到错误消息:输入"Observable< {}>"在第29行第9行中不能将其分配给类型"Observable&Location;]".

I keep getting the error: Type 'Observable<{}>' is not assignable to type 'Observable<Location[]>'.at line 29 col 9

我做错了什么吗?谢谢您的帮助

Am I doing something obviously wrong? Thank you for any help

推荐答案

我无法告诉您确切的问题，但是我也为这几次苦苦挣扎！

I can't tell you that exact problem, but I struggled over this few times too!

.switchMap()存在问题.Idk，如果是打字稿问题或其他问题.也许只是打字文件是错误的..

It's a problem with .switchMap(). Idk if it's an typescript problem or what.. Maybe just the typings file is bad..

您必须投射它:

ngOnInit(): void {
    this.locations = <Observable<Location[]>>this.searchTerms // <- ERROR HERE
        .debounceTime(300)
        .distinctUntilChanged()
        .switchMap(term => term
            ? this.locationSearchService.search(term)
            : Observable.of<Location[]>([]))
        .catch(error => {
            console.log(error);
            return Observable.of<Location[]>([]);
        })
}

或者(如上所述)将函数 switchMap()和 catch()与类型声明一起使用，如下所示:

Or (as you mentioned) use your functions switchMap() and catch() with a type declaration, like this:

ngOnInit(): void {
    this.locations = this.searchTerms // <- ERROR HERE
        .debounceTime(300)
        .distinctUntilChanged()
        .switchMap<Observable<Location[]>>(term => term
            ? this.locationSearchService.search(term)
            : Observable.of<Location[]>([]))
        .catch<Observable<Location[]>>(error => {
            console.log(error);
            return Observable.of<Location[]>([]);
        })
}

这篇关于输入'Observable< {}>不可分配给“可观察"类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！