类型 X 在类型 Y length、 pop、 push、 concat 和其他26中缺少以下属性

我有这个产品界面:

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 ] Type‘ Product’在 Type 中缺少以下属性 Product [] : length，pop，push，concat，and 26 more. [2740]

删除对 productsArray变量的键入可以删除错误，但是不明白为什么这不起作用，因为服务器响应是 Products类型的对象数组？

320629 次浏览
小开
最佳答案

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

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

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

您忘记将 getProducts 返回类型标记为数组。在 getProducts 中，它说它将返回一个产品。那就改成这样:

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;
});
}
}

而不是

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


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

我遇到了同样的问题，解决方法如下 定义一个像我这样的接口

export class Notification {
id: number;
heading: string;
link: string;
}

并在没有服务写

allNotifications: Notification[];
//NotificationDetail: Notification;
private notificationsUrl = 'assets/data/notification.json';  // URL to web api
private downloadsUrl = 'assets/data/download.json';  // URL to web api


constructor(private httpClient: HttpClient ) { }


getNotifications(): Observable<Notification[]> {
//return this.allNotifications = this.NotificationDetail.slice(0);
return this.httpClient.get<Notification[]>


(this.notificationsUrl).pipe(map(res => this.allNotifications = res))
}

以及组件写入

 constructor(private notificationService: NotificationService) {
}


ngOnInit() {
/* get Notifications */
this.notificationService.getNotifications().subscribe(data => this.notifications = data);
}
小开

这个错误也可能是因为您没有订阅可观察的。

例如:

this.products = this.productService.getProducts();

这样做:

   this.productService.getProducts().subscribe({
next: products=>this.products = products,
error: err=>this.errorMessage = err
});
小开

我在 GraphQL 变异输入对象上得到了相同的错误信息，然后我发现了问题，实际上在我的例子中变异需要一个对象数组作为输入，但是我试图插入一个对象作为输入。例如:

第一次

const mutationName = await apolloClient.mutate<insert_mutation, insert_mutationVariables>({
mutation: MUTATION,
variables: {
objects: {id: 1, name: "John Doe"},
},
});

将变异调用更正为数组

const mutationName = await apolloClient.mutate<insert_mutation, insert_mutationVariables>({
mutation: MUTATION,
variables: {
objects: [{id: 1, name: "John Doe"}],
},
});

有时像这样简单的错误会导致问题。希望这能帮到某些人。

小开

您必须指定响应的类型:

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

试试这个:

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

对我来说，这个错误是由错误的 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)
}
}

提交答案