I am trying to display several elements below:

TIT : [
      {
         ADVTITRE : {
            BASIQUETITRE : {
               LABEL:"LULU PORT VERY DEF RCAP",
               ISIN:"NOR0941535816",
               COURS: {
                  DATE:"2022-01-08",
                  VALUE:41.990000,
               }
            }
         },
         AANBOD : {
            RISK: 3,
            DATEVALID_DEBUT:"2019-02-28",
            DATEVALID_FIN:"2039-12-31",
         },

      },
      {
         ADVTITRE : {
            BASIQUETITRE : {
               LABEL:"LILA PORT VERY DEF RCAP",
               ISIN:"MARU0941535816",
               COURS: {
                  DATE:"2022-12-08",
                  VALUE:98.990000,
               }
            }
         },
         AANBOD : {
            RISK: 3,
            DATEVALID_DEBUT:"2019-02-25",
            DATEVALID_FIN:"2049-12-31",
         },

      },
     
   ]

By doing a console.log I get the data.

enter image description here

My problem is the HTML part, when I want to display the LABEL variable (ADVTITRE.BASIQUETITRE.LABEL) , I have an error message:

- error TS2322: Type 'TitPurchase' is not assignable to type 'NgIterable<any>| null | undefined'.
31                         
<tr *ngFor="let rLine of details">

html

<div  *ngIf="details">
   ...
   <tbody>
      <tr *ngFor="let rLine of details">
         <td> {{ rLine.ADVTITRE.BASIQUETITRE.LABEL }}</td>
      </tr>
      ...    
   </tbody>
</div>

I don't know where the problem lies? Do you have a solution, please?

Here is the file -> purchase-securities.ts

export class PurchaseSecuritiesComponent implements OnInit, OnDestroy {

    private unsubscribe$ = new Subject < void > ();


    details: TitPurchase;


    constructor(
        private service: PurchaseSecuritiesService,
        private createDateTimePipe: CreateDateTimePipe,
        private activatedRoute: ActivatedRoute
    ) {}

    ngOnInit(): void {
        this.getPurchaseSecurities();
    }

    ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }


    getPurchaseSecurities(): void {
        this.service.getPurchaseSecurities().pipe(
            takeUntil(this.unsubscribe$)
        ).subscribe(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
                this.details = res.TIT;
                console.log(this.details)
            }
        });
    }

}

The file -> purchase-securitiesResponse.ts

import { ApiResponse } from "src/shared/types/api.response";

export interface PurchaseSecuritiesResponse extends ApiResponse {
        TIT: TitPurchase;


}

export interface TitPurchase {

    ADVTITRE: {
        BASIQUETITRE: {
            SVM: number;
            ISIN: string;
            STOCK: string;
            LABEL: string;
            PLACE: number;
            PLACELABEL: string;
            REGR: number;
            REGRLABEL: string;
            DEVISE: string;
            COURS: {
                DATE: string;
                TIME: string;
                VALUE: number;
                HIGH: number;
                LOW: number;
                CLOTURE: number;
            };
        };
    };

    AANBOD: {
        ISINAANBOD: string;
        RISK: string;
        COMMENTAIRE_FR: string;
        COMMENTAIRE_NL: string;
        QTTE_TOTALE: number;
        QTTE_FAITE: number;
        QTTE_REST: number;
        QTTE_MIN: number;
        QTTE_MAX: number;
        MULTIPLE: number;
        DATEVALID_DEBUT: Date;
        DATEVALID_FIN: Date;
        MARKET: string;
        SIPAGENCEFLAG: string;
        SIPCLIENTFLAG: string;
        SIPMINIMUM: number;
        SIPMAXIMUM: number;
        PRIX_MARCHE: number;
        PRIX_CLIENT: number;
    }
}

Thank you in advance for your help.

CodePudding user response：

You need to take a closer look of what you are posting, from what I see the error message is self explanatory. You are iterating an object, and ngFor expects an Iterable data structure.

The problems resides in the details declaration:

details: TitPurchase; // this is NOT an array, is an plane object
theCorrectDetails: TitPurchase[] = []; // this is an array, and empty one by default