打字稿：类型X缺少类型Y的长度，弹出，推入，连拍等26个以下属性。[2740]

Question

我有产品界面：

export interface Product{
  code: string;
  description: string;
  type: string;
}

使用方法调用产品端点的服务：

  public getProducts(): Observable<Product> {
    return this.http.get<Product>(`api/products/v1/`);
  }

我使用此服务获取产品的组件。

export class ShopComponent implements OnInit {
    public productsArray: Product[];

    ngOnInit() {
        this.productService.getProducts().subscribe(res => {
          this.productsArray = res;
        });
    }
}

在这种状态下，我得到了错误：

[ts]类型“产品”缺少类型“产品[]”中的以下属性：长度，弹出，推入，连续和另外26个。[2740]

删除productsArray变量上的类型可消除该错误，但不知道为什么此方法不起作用，因为服务器响应是类型为Products？的对象数组。

Answer 1

您正在返回Observable<Product>并期望它Product[]位于subscribe回调内部。

从返回的类型http.get()和getProducts()应Observable<Product[]>

public getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`api/products/v1/`);
}

Answer 2

您必须指定响应的类型：

this.productService.getProducts().subscribe(res => {
    this.productsArray = res;
});

尝试这个：

this.productService.getProducts().subscribe((res: Product[]) => {
    this.productsArray = res;
});

Answer 3

您忘记将getProducts返回类型标记为数组。在您的getProducts中，它表示将返回单个产品。因此，将其更改为：

public getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`api/products/v1/`);
  }

Answer 4

对于像我这样的新手，不要为服务响应分配变量，这意味着做

export class ShopComponent implements OnInit {
  public productsArray: Product[];

  ngOnInit() {
      this.productService.getProducts().subscribe(res => {
        this.productsArray = res;
      });
  }
}

代替

export class ShopComponent implements OnInit {
    public productsArray: Product[];

    ngOnInit() {
        this.productsArray = this.productService.getProducts().subscribe();
    }
}