Angular 17中TypeScript接口与模型迭代器缺失报错求助

在Angular 17的TypeScript项目中，定义了Articlefournisseur、Conditionnement等模型及对应接口，返回Conditionnement数据时触发错误：

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

期望得到可在组件HTML中以ArticleFournisseur.Conditionnement[0]形式循环使用的层级数据，求解决方法。

相关代码 #

Articlefournisseur 模型 #

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

InterfaceArticlefournisseurs 接口 #

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

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

Conditionnement 相关接口与模型 #

IntefaceConditionnement 接口

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

IntefaceConditionnements 接口与 Conditionnement 模型

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

错误源于类型不匹配和接口与类的定义逻辑混乱，按以下步骤修复：

1. 对齐接口与类的类型关联 #

InterfaceArticlefournisseurs中conditionnement字段定义为IntefaceConditionnements[]，但Articlefournisseur类里声明为Conditionnement[]，两者类型不兼容。修改InterfaceArticlefournisseurs，直接关联Conditionnement类型：

import { Conditionnement } from "./conditionnements";

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

2. 修复Conditionnement类的构造函数 #

Conditionnement类实现了IntefaceConditionnements接口，构造函数需接收符合该接口结构的参数（而非直接接收数组）：

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

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

    constructor(conditionnementsData: IntefaceConditionnements){
        this.conditionnements = conditionnementsData.conditionnements;
    }

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

3. 修正Articlefournisseur构造函数的类型转换 #

将接口数据逐个转换为Conditionnement实例，不能直接赋值：

import { Conditionnement } from "./conditionnements";
import { InterfaceArticlefournisseurs } from "./interface-articlefournisseurs";

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

    constructor(articlefournisseurInterface: InterfaceArticlefournisseurs) {
        this.id = articlefournisseurInterface.id;
        // 将每个接口数据转为Conditionnement实例
        this.conditionnement = articlefournisseurInterface.conditionnement.map(item => new Conditionnement(item));
    }
}

4. 在HTML中循环使用数据 #

修复后可在组件HTML中按层级循环或直接访问：

<!-- 多层循环示例 -->
<div *ngFor="let article of articleFournisseurs">
  <h3>Article ID: {{ article.id }}</h3>
  <div *ngFor="let cond of article.conditionnement">
    <div *ngFor="let item of cond">
      <p>Unité Commande: {{ item.idUniteCommande }}</p>
      <p>Coefficient Achat: {{ item.coefficientAchatCommande }}</p>
    </div>
  </div>
</div>

<!-- 直接访问指定层级示例 -->
<p>{{ articleFournisseurs[0].conditionnement[0].conditionnements[0].articleId }}</p>

内容的提问来源于stack exchange，提问作者Mika Raveroson