how to display array of object in typescript

hi, i have array that contains another array like this when i want display for example phases.libellei can't

i use this array

this.projetList = [{
title: "Titre du projet 01",
dateDebut: "21 mars 2017",
dateFin: " 01 Janvier 2018",
img: "./assets/img/projet_1.jpg",
filliale: "F1",
doc_fiche_projet: "../pdf/test_pdf.pdf",
responsable: "Resposable projet",
taille_fiche_projet: "pdf 4.06 Mo",
objectif: "Lorem ipsum dolor sit amet",
type_projet: "Organisation",
domaine: "Domaine fonctionnel 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
phases: [{
libelle: "demarrage",
code: "demarrage",
img:"assets/img/icons/icon_demarrage.png",
phaseColor: "color_yellow",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "planification",
code: "planification",
img:"./assets/img/icons/icon_planif.png",
phaseColor: "color_cyan",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "exécution",
code: "execution",
img:"./assets/img/icons/icon_execution.png",
phaseColor: "color_orange",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "Suivi",
code: "suivi",
img:"./assets/img/icons/icon_suivi.png",
phaseColor: "color_pink",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "Clôture",
code: "cloture",
img:"assets/img/icons/icon_cloture.png",
phaseColor: "color_pistach",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "Bilan d’efficacité",
code: "bilan",
img:"assets/img/icons/icon_bilan.png",
phaseColor: "color_green",
du: "01 mars 2017",
au: "02 avril 2018"
}],
livrablesDemmarage: [{
title: "Livrable 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 02",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 03",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesPlanification: [{
title: "Livrable 04",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 05",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 06",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesExecution: [{
title: "Livrable 07",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 09",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 10",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesSuivi: [{
title: "Livrable 11",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 12",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 13",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesCloture: [{
title: "Livrable 14",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 15",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 16",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesBilan: [{
title: "Livrable 17",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 18",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 19",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}]
},
{
title: "Titre du projet 02",
dateDebut: "21 mars 2017",
dateFin: " 01 Janvier 2018",
img: "./assets/img/projet_2.jpg",
filliale: "F2",
doc_fiche_projet: "../pdf/test_pdf.pdf",
responsable: "Resposable projet",
taille_fiche_projet: "(pdf 4.06 Mo)",
objectif: "Lorem ipsum dolor sit amet",
type_projet: "Organisation",
domaine: "Domaine fonctionnel 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
phases: [{
libelle: "demarrage",
code: "demarrage",
img:"assets/img/icons/icon_demarrage.png",
phaseColor: "color_yellow",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "planification",
code: "planification",
img:"assets/img/icons/icon_planif.png",
phaseColor: "color_cyan",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "exécution",
code: "execution",
img:"assets/img/icons/icon_execution.png",
phaseColor: "color_orange",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "Suivi",
code: "suivi",
img:"assets/img/icons/icon_suivi.png",
phaseColor: "color_pink",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "Clôture",
code: "cloture",
img:"assets/img/icons/icon_cloture.png",
phaseColor: "color_pistach",
du: "01 mars 2017",
au: "02 avril 2018"
}, {
libelle: "Bilan d’efficacité",
code: "bilan",
img:"assets/img/icons/icon_bilan.png",
phaseColor: "color_green",
du: "01 mars 2017",
au: "02 avril 2018"
}],
livrablesDemmarage: [{
title: "Livrable 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 02",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 03",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesPlanification: [{
title: "Livrable 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 02",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 03",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesExecution: [{
title: "Livrable 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 02",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 03",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesSuivi: [{
title: "Livrable 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 02",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 03",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesCloture: [{
title: "Livrable 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 02",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 03",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}],
livrablesBilan: [{
title: "Livrable 01",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 02",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, {
title: "Livrable 03",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}]
}];

my script is this

<div>
<input type="text" id="search" placeholder="Search to type">
<ul>
<li *ngFor="let p of projetList">
{{p.title}} <br> {{p.dateDebut}}
<br> {{p.dateFin}} <br><img src="{{p.img}}"/><br>{{p.filliale}}
<span *ngFor="let p of projetList.phases">
{{p.phases.libelle}}span>
li>
ul>
div>

how to do this please

and thanks in advance

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Dharmraj Thakur8y ago
{{p.libelle}}
+1
Dev Teywa8y ago
Dharmraj Thakur

i want to display phases.code when phases.libelle = "planning"

how to do please?
+1
Dharmraj Thakur8y ago
Make habit to close or accept the thread after solution.
+1
Dev Teywa8y ago
I solved the problem thank you so much
+2
Dharmraj Thakur8y ago
Correct here...
<span *ngFor="let p of projetList.phases">
   {{p.libelle}}
span>
+1