Angular Typescript:typex缺少typey-length、pop、push、concat等的以下属性。[2740]

Angular Typescript:typex缺少typey-length、pop、push、concat等的以下属性。[2740],angular,typescript,typescript-typings,Angular,Typescript,Typescript Typings,我有这个产品界面: export interface Product{ code: string; description: string; type: string; } 具有调用产品终结点的方法的服务: public getProducts(): Observable<Product> { return this.http.get<Product>(`api/products/v1/`); } 在这种状态下,我得到了一个错误: [

我有这个产品界面:

export interface Product{
  code: string;
  description: string;
  type: string;
}
具有调用产品终结点的方法的服务:

  public getProducts(): Observable<Product> {
    return this.http.get<Product>(`api/products/v1/`);
  }
  
在这种状态下,我得到了一个错误:

[ts]类型“产品”缺少类型中的以下属性 “Product[]”:长度、弹出、推送、concat和更多。[2740]


删除对
productsArray
变量的键入会删除错误,但不知道为什么这不起作用,因为服务器响应是
产品类型中的一个对象数组。

您正在返回
可观察的
并希望它是
subscribe
回调中的
产品[]

http.get()
getProducts()
返回的类型应该是
Observable

publicGetProducts():可观察{
返回这个.http.get(`api/products/v1/`);
}

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

public getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(`api/products/v1/`);
  }
publicGetProducts():可观察{
返回这个.http.get(`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;
}
在nofificationService中写入

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

此错误也可能是因为您没有订阅可观察对象

例如,而不是:

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=wait apolloClient.mutate({
突变:突变,
变量:{
对象:{id:1,名称:“johndoe”},
},
});
更正了作为数组的变异调用

const mutationName = await apolloClient.mutate<insert_mutation, insert_mutationVariables>({
      mutation: MUTATION,
      variables: {
        objects: [{id: 1, name: "John Doe"}],
      },
    });
const mutationName=wait apolloClient.mutate({
突变:突变,
变量:{
对象:[{id:1,名称:“johndoe”}],
},
});

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

您必须指定响应的类型

  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)
  }
}
将类导出到服务{
apiUrl:String=https://jsonplaceholder.typicode.com/todos“//错误的大写字符串
构造函数(私有httpClient:httpClient){}
getTodos():可观察{
返回this.httpClient.get(this.apirl)
}
}
我应该用的地方

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)
  }
}
将类导出到服务{
apiUrl:string=https://jsonplaceholder.typicode.com/todos“//小写字符串!
构造函数(私有httpClient:httpClient){}
getTodos():可观察{
返回this.httpClient.get(this.apirl)
}
}

getProducts()
被定义为返回单个
产品的
可观察的
,但您可以将观察到的结果分配给
产品[]
数组。少量更正。将类型更改为array
returnthis.http.get(api/products/v1/)谢谢@JoachimSauer,这太容易看了;)作品注意:这需要在服务类中“import{Observable}from'rxjs';”
  this.productService.getProducts().subscribe((res: Product[]) => {
          this.productsArray = res;
        });
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)
  }
}