Interface and model in TypeScript (angular 17)

Can someone help me with my code?

This is the Articlefournisseurs model:

import { Conditionnement } from "./conditionnements";
// import { IntefaceConditionnements, IntefaceConditionnement } from "./inteface-conditionnements";
import { InterfaceArticlefournisseurs } from "./interface-articlefournisseurs";

export class Articlefournisseur implements InterfaceArticlefournisseurs {
id?: number | undefined;
conditionnement: Conditionnement[];

constructor(articlefournisseurInterface: InterfaceArticlefournisseurs) {
this.conditionnement = articlefournisseurInterface.conditionnement;
}
}


And this is the interface InterfaceArticlefournisseurs :

import { IntefaceConditionnements } from "./inteface-conditionnements";

export interface InterfaceArticlefournisseurs {
id?: number,
conditionnement: IntefaceConditionnements[]
}


This is the conditionnement model an interface:

export interface IntefaceConditionnement {
id?: number,
articleId: number,
idUniteCommande: number,
coefficientAchatCommande: number,
idUniteAchat: number,
coefficientInventaireAchat: number,
iduniteInventaire: number,
coefficientInventaire: number,
idUniteFt: number,
articlefournisseurId: number,
}


export interface IntefaceConditionnements {
conditionnements: IntefaceConditionnement[];
}

import { IntefaceConditionnements, IntefaceConditionnement } from "./inteface-conditionnements";

export class Conditionnement implements IntefaceConditionnements {
conditionnements: IntefaceConditionnement[];

constructor(conditionnements: IntefaceConditionnement[]){
this.conditionnements = conditionnements;
}

*[Symbol.iterator]() {
for (let conditionnement of this.conditionnements) {
yield conditionnement;
}
}
}


My problem is when i tried to return Conditionnement data, I get the following error:

Property '[Symbol.iterator]' is missing in type 'IntefaceConditionnements' but required in type 'Conditionnement'
​

I expect to have a data like this:

ArticleFournisseur.Conditionnement[0]: {...}
ArticleFournisseur.Conditionnement[1]: {...}


And use it in a loop in component html of my project.

Continue reading...