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

时间:2019-02-01 08:49:06

标签: 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 class ShopComponent implements OnInit {
    public productsArray: Product[];

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

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

  

[ts]类型“产品”缺少类型的以下属性   'Product []':长度,弹出,推送,连拍以及另外26个。 [2740]

取消在productsArray变量上的键入可以消除该错误,但是由于服务器响应是一组Products类型的对象数组,所以不知道为什么它不起作用吗?

8 个答案:

答案 0 :(得分:9)

您将返回dat1 <- read.table(header = TRUE, text=" Time GB 1 300 2 500 1 0 2 200 1 0 ") ,并期望它在Observable<Product>回调中成为Product[]

subscribehttp.get()返回的类型应为getProducts()

Observable<Product[]>

答案 1 :(得分:2)

我遇到了同样的问题,并解决了以下问题 定义像我的接口

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

并在组件中写入

 constructor(private notificationService: NotificationService) {
   }

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

对于像我这样的新手,请不要为服务响应的含义分配变量

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

答案 4 :(得分:1)

我在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"}],
      },
    });

有时,诸如此类的简单错误可能会导致问题。希望这会帮助某人。

答案 5 :(得分:0)

此错误也可能是因为您没有订阅Observable。

示例,而不是:

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

执行以下操作:

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

答案 6 :(得分:0)

您必须指定响应的类型

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

尝试一下

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

答案 7 :(得分:0)

对我来说,错误是由 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)
  }
}