Question

当我尝试将http服务的结果复制到变量产品中时，我在Angular中收到以下错误。有什么想法吗？我认为这可能与映射有关，我不确定如何做。

顺便说一下，我想使用HttpClient，而不是Http，并且应该使用get（“api / route”）自动完成映射;语法，对吗？

Error  TS2322  (TS) Type 'Observable<Product[]>' is not assignable to type 'Product[]'.   Property 'includes' is missing in type 'Observable<Product[]>'.

以下是代码：

import { HttpClient} from "@angular/common/http"
import { Injectable } from "@angular/core"
import { Product } from "./product";
import { Observable } from "rxjs";



@Injectable()
export class DataService {
    constructor(private http: HttpClient) { }

    public products: Product[] = [];


    loadProducts(): Observable<Product[]>  {
        debugger;
        this.products = this.http.get<Product[]>("/api/products");
        return true;
    }
}

之前的版本，虽然有效但没有类型安全，是（仅供记录）：

...

@Injectable()
export class DataService {
    constructor(private http: HttpClient) { }

    public products = [];

     loadProducts() {
        return this.http.get("/api/products")

            .map((data: any[]) => {                               
                this.products = data;
                return true;                 
            });
    }
}

我有兴趣使用类型安全工作制作示例，因此当然，Product在.ts文件中定义如下：

export interface Product {
    id: number;
    category: string;
    size: string;
   //...
}

我确保从api返回的属性与接口的属性匹配。

Answer 1

您的loadProducts方法需要返回Observable<Product[]>，因此您只需遵循此规则，例如，如下所示：

loadProducts(): Observable<Product[]>  {
  return this.http.get<Product[]>("/api/products");
}

请注意，HTTP请求会在您的情况下返回Observable，这意味着，this.products = this.http.get<Product[]>("/api/products");会将Observable类型存储到this.products，而不是Product[]正如您所料。

修改

“我真的需要将api调用的结果存储在Product []类型的变量中，所以我需要知道如何从Observable进行转换”

如果我没有弄错的话，您可以使用take(n)执行该操作，n会自Observable unsubscribe个take(1)个参数自动生成Observable可以使用.subscribe。然后，您必须使用loadProducts(): Observable<Product[]> { const responseSubscription: Observable<Product[]> = this.http.get<Product[]>("/api/products"); responseSubscription .take(1) .subscribe(products => this.products = products); return responseSubscription; }处理返回的{{1}}，如下所示：

{{1}}

类型的observable t不能赋值给t

1 个答案: