Typescript：Type X 缺少 Type Y 长度、pop、push、concat 等 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 类型的对象数组？

原文由 mpro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在返回 Observable<Product> 并期望它是 Product[] 在 subscribe 回调中。

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

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

原文由 Amit Chigadani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对我来说，错误是由错误的 url 字符串类型提示引起的。我用了：

 export class TodoService {

  apiUrl: String = 'https://jsonplaceholder.typicode.com/todos' // wrong uppercase String

  constructor(private httpClient: HttpClient) { }

  getTodos(): Observable<Todo[]> {
    return this.httpClient.get<Todo[]>(this.apiUrl)
  }
}

我应该在哪里使用

export class TodoService {

  apiUrl: string = 'https://jsonplaceholder.typicode.com/todos' // lowercase string!

  constructor(private httpClient: HttpClient) { }

  getTodos(): Observable<Todo[]> {
    return this.httpClient.get<Todo[]>(this.apiUrl)
  }
}

原文由 Michał Jabłoński 发布，翻译遵循 CC BY-SA 4.0 许可协议