通用类型&#39; Observable <t>&#39;需要1个类型的参数

时间:2017-01-20 06:52:03

标签: angular typescript

在Angular 2(TypeScript)代码下面给出了3以下的错误,如何解决它们。请建议。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from "rxjs/Observable";

@Component({
    selector: 'http-client',
    template: `<h1>All Products</h1>
  <ul>
    <li *ngFor="let product of products">
       {{product.title}}
    </li>
  </ul>
  `})
class AppComponent {

    products: Array<string> = [];

    theDataSource: Observable;

    constructor(private http: Http) {

        this.theDataSource = this.http.get('api/products/')
            .map(res => res.json());
    }

    ngOnInit() {
        // Get the data from the server
        this.theDataSource.subscribe(
            data => {
                if (Array.isArray(data)) {
                    this.products = data;
                } else {
                    this.products.push(data);
                }
            },
            err =>
                console.log("Can't get products. Error code: %s, URL: %s ", err.status, err.url),
            () => console.log('Product(s) are retrieved')
        );
    }
}

@NgModule({
    imports: [BrowserModule,
        HttpModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

错误是,

  1. TS2314通用类型&#39; Observable&#39;需要1个类型的参数。
  2. TS7006参数&#39;数据&#39;隐含地有一个“任何”的类型。
  3. TS7006参数&#39;错误&#39;隐含地有一个“任何”的类型。

5 个答案:

答案 0 :(得分:31)

for th in soup.table.thead.tr.children:
    pass

其中theDataSource: Observable<any>; 可以(或者应该如果可能)是一个更具体的类型,它匹配它应该发出的值的类型。

答案 1 :(得分:6)

如果你查看Angular Http模块的源代码,你可以找到Http类的方法 request

https://github.com/angular/angular/blob/2.4.1/modules/%40angular/http/src/http.ts#L111

所有其他方法(获取,发布等)包装此请求。您还可以看到该请求返回一个具有Response类通用的Observable。响应类是Http模块的一部分,因此您的代码可以修改为:

import { HttpModule, Http, Response } from '@angular/http';
...
theDataSource: Observable<Response>;

或者,如果您不需要这种强大的典型,您可以将任何作为通用参数传递

theDataSource: Observable<any>;

但在我看来 - 强大的典型是更好的选择。

答案 2 :(得分:2)

1)theDataSource: Observable; - &gt; theDataSource: Observable<any>;

2/3)您可以将"noImplicitAny": false添加到tsconfig.json

或使用data =>err =>更改(data: any) =>(err: any) =>

答案 3 :(得分:0)

这里imo最好的做法是将其设置为theDataSource: Observable<Response>;,因为实际上这是基于您在构造函数中工作的类型。我会像瘟疫一样避免any

旁注,我知道这对您的财产无济于事,但是当您尝试使用方法来做到这一点

  type MethodPayload<T> = {
    something: string;
    data: T;
  }

  methodName<T>(payload: MethodPayload<T>) {
    // thing with payload
  }

答案 4 :(得分:0)

可能只是缺少的尖括号了吗?

Observable(PhotosResult)而不是Observable<PhotosResult>