condition to hide html table

Question

I would like to create a condition. If the STATUTDTA === 0, I don't want to display the HTML table.

I tried this line:

<ng-container *ngIf="dta.PTF_DTA.STATUTDTA === 0"> 

I have an error => TS2339: Property 'STATUTDTA' does not exist on type 'PortefeuilleDta[]'.

<ng-container *ngIf="dta.PTF_DTA.STATUTDTA === 0">
   <table class="table table-hover table-striped spaceLeft">
      <tbody>
         <tr class="text-center">
            <th scope="col">Portefeuille</th>
            <th scope="col">Intitulé</th>
            <th scope="col">Type de compte</th>
            <th scope="col">Qualité</th>
            <th scope="col">Statut demande DTA</th>
            <th scope="col">Créer formulaire</th>
         </tr>
         <tr *ngFor="let element of dta.PTF_DTA">
            <td class="text-center"> {{ element.PTF.REFERENCE }} </td>
            <td class="text-center"> {{ element.PTF.INTITULE1 }} </td>
            <td class="text-center"> {{ element.PTF.COIN_LABEL }} </td>
            <td class="text-center"> {{ element.QUALITE_LIB }} </td>
            <td class="text-center"> {{ element.DTA.STATUTDTA_LIB }} </td>
            <td class="text-center py-1">
               <button (click)="createNewDta(element.PTF.REFERENCE)" class="btn btn-outline-primary btn-xs">Création</button>
            </td>
         </tr>
      </tbody>
   </table>
</ng-container>

file.response.ts

export interface SearchDtaResponse extends ApiResponse {

    DTA: Dta;
}

export interface Dta {
    PP:  PersonnePhysiqueDta;
    PTF_DTA: PortefeuilleDta[];
}
export interface PortefeuilleDta {

    DTA: {
        PAYS: number;
        EXERCICE: number;
        STATUTDTA: number;
        NUMEROSUIVI: number;
        STATUTDTA_LIB: string;
 
    }

    PTF: {
        REFERENCE: string;
        INTITULE1: string; 
        COIN_LABEL: string; 
        ACTIF_LABEL: string; 
        ACTIF: number; 
   
    }

    QUALITE: number;
    QUALITE_LIB: string;
}

export interface PersonnePhysiqueDta {
    NOMFAMILLE: string; 
    NUMEROREGISTRENATIONAL: number;
    NATIONALITE: string;
    PRENOM: string;
    LIEUNAISSANCE: string;
    DATENAISSANCE: Date;
    PAYSDOMICILE: string;
}

The JSON file is here.

I don't know where the problem is?

Thanks

Answer 1

you should change

<ng-container *ngIf="dta.PTF_DTA.STATUTDTA === 0">

to

<ng-container *ngIf="dta.PTF_DTA.length === 0">

your dta.PTF_DTA is an array containing your objects of DTA. The Table would then be invisible if there is no data in your array.