Type de script: le type X ne contient pas les propriétés suivantes de type Y length, pop, Push, concat et 26 autres. [2740]

Question

J'ai l'interface produit:

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

Service avec méthode appelant le point de terminaison du produit:

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

Et composant où j'utilise ce service pour obtenir les produits.

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

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

Avec cet état, je reçois une erreur:

[ts] Le type 'Product' ne contient pas les propriétés suivantes du type 'Product []': longueur, pop, Push, concat et 26 autres. [2740]

La suppression de la saisie sur la variable productsArray supprime l'erreur, mais vous ne comprenez pas pourquoi cela ne fonctionne pas, car la réponse du serveur est un tableau d'objets du type Products?

Answer 1

J'ai eu le même problème et j'ai résolu comme suit définir une interface comme la mienne

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

et dans nofificationService écrire

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

et en écriture de composants

 constructor(private notificationService: NotificationService) {
   }

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