Angular showing error: Type '{ }[]' is not assignable to type '[{ }]'

Issue

I need some help and explanation with the error I am receiving in my app... I get a JSON from an API that gives me some data and that data has an array products. On click I want to copy these products(izdelki) from this array to a new empty array and send it over an API call to the backend. But I have a problem with getting the products from this array I receive. My code is returning me this error:

error TS2322: Type '{ sifra: string; naziv: string; kolicina: number; ean: string; em: string; cena: number; rabat1: number; rabat2: number; prednarocilo: number; ismail: number; }[]' is not assignable to type '[{ sifra: string; naziv: string; kolicina: number; ean: string; em: string; cena: number; rabat1: number; rabat2: number; prednarocilo: number; ismail: number; }]'.
[ng]   Target requires 1 element(s) but source may have fewer.
[ng] 
[ng] 38         this.orderProducts = data.map(this.order['izdelki']);

I am new to angular and Arrays are giving me some trouble :)

single-order.ts code:

export interface SingleOrder {
  id: number;
  datum: string;
  datum_dobave: string;
  dostava: number;
  g_popust: number;
  opomba: string;
  predkoci1narocilo: number;
  kc: number;
  prevoznik: string;
  narocilnica: string;
  narocilnicadate: string;
  izdelki: {
    sifra: string;
    naziv: string;
    kolicina: number;
    ean: string;
    em: string;
    cena: number;
    rabat1: number;
    rabat2: number;
    prednarocilo: number;
    ismail: number;
  }[];
}

Service to get the single order:

  getSingleOrder(id: number): Observable<SingleOrder[]> {
    return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        return this.httpClient.get<SingleOrder[]>(`${environment.apiUrl}customer/orders/${id}`, { headers, observe: 'response' });
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log(err.error.message);
        }
        if (err.status === 401) {
          this.authService.logout();
          this.router.navigateByUrl('/login', { replaceUrl: true });
        }
        return EMPTY;
      }),
      map(res => res.body)
    );
  };

Here is my order-view.page.ts code:

export class Izdelki {
  sifra: string;
  naziv: string;
  kolicina: number;
  ean: string;
  em: string;
  cena: number;
  rabat1: number;
  rabat2: number;
  prednarocilo: number;
  ismail: number;
}
@Component({
  selector: 'app-order-view',
  templateUrl: './order-view.page.html',
  styleUrls: ['./order-view.page.scss'],
})
export class OrderViewPage implements OnInit, OnDestroy {
  order: SingleOrder[];
  // orderProducts: SingleOrder['izdelki'][];
  orderProducts: SingleOrder['izdelki'][];
  repeatOrderArr: Izdelki[];
  private orderSubscription: Subscription;
  constructor(
    private route: ActivatedRoute,
    private customerService: CustomerService,
  ) { }

  ngOnInit() {
    this.getOrder();
  }

  getOrder() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.orderSubscription = this.customerService.getSingleOrder(id).subscribe(
      data => {
        this.order = data;
        console.log('Order data:', this.order);
        this.orderProducts = data.map(this.order['izdelki']);

      },
      error => {
        console.log('Error', error);
      });
  }

  repeatThisPurchase() {
    this.repeatOrderArr= [...this.orderProducts];
    console.log(this.repeatOrderArr);
  }

  ngOnDestroy(): void{
    this.orderSubscription.unsubscribe();
  }

}

Here is an image of console.log(data) so you can see whats inside the JSON response:

HTML file code:

<ion-button color="vigros" class="purchase-btn" size="default" type="submit" (click)="repeatThisPurchase()" expand="block">Ponovi nakup</ion-button>

Solution

let say izdelki is a class

export class Izdelki {
      sifra: string;
      naziv: string;
      kolicina: number;
      ean: string;
      em: string;
      cena: number;
      rabat1: number;
      rabat2: number;
      prednarocilo: number;
      ismail: number;
    }

so inSingleORder you declared izdelki with type [Izdelki]

export interface SingleOrder {
  izdelki: [Izdelki]
}

but in your subscribe you used it directly like if izdelki is of type Izdelki

So SingleOrder izdelki became

export interface SingleOrder {
  izdelki: Izdelki
}

or if izdelki is an array

 export interface SingleOrder {
      izdelki: Izdelki[]
    }

To solve your issue you have to

1. declare SingleOrder izdelki with the type Izdelki
2. declare orderProducts as an array of SingleOrder['izdelki']

orderProducts: SingleOrder['izdelki'][];

Answered By - jeremy-denis