Post
Ask Question
Dev Teywa

Dev Teywa

  • NA
  • 250
  • 40.1k

how to display array of object in typescript

Feb 2 2018 4:23 PM
hi, i have array that contains another array like this when i want display for example phases.libellei can't 
 i use this array 
   
  1. this.projetList = [{  
  2.           title: "Titre du projet 01",  
  3.           dateDebut: "21 mars 2017",  
  4.           dateFin: " 01 Janvier 2018",  
  5.           img: "./assets/img/projet_1.jpg",  
  6.           filliale: "F1",  
  7.           doc_fiche_projet: "../pdf/test_pdf.pdf",  
  8.           responsable: "Resposable projet",  
  9.           taille_fiche_projet: "pdf 4.06 Mo",  
  10.           objectif: "Lorem ipsum dolor sit amet",  
  11.           type_projet: "Organisation",  
  12.           domaine: "Domaine fonctionnel 01",  
  13.           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.",  
  14.           phases: [{  
  15.               libelle: "demarrage",  
  16.               code: "demarrage",  
  17.               img:"assets/img/icons/icon_demarrage.png",  
  18.               phaseColor: "color_yellow",  
  19.               du: "01 mars 2017",  
  20.               au: "02 avril 2018"  
  21.           }, {  
  22.               libelle: "planification",  
  23.               code: "planification",  
  24.               img:"./assets/img/icons/icon_planif.png",  
  25.               phaseColor: "color_cyan",  
  26.               du: "01 mars 2017",  
  27.               au: "02 avril 2018"  
  28.           }, {  
  29.               libelle: "exécution",  
  30.               code: "execution",  
  31.               img:"./assets/img/icons/icon_execution.png",  
  32.               phaseColor: "color_orange",  
  33.               du: "01 mars 2017",  
  34.               au: "02 avril 2018"  
  35.           }, {  
  36.               libelle: "Suivi",  
  37.               code: "suivi",  
  38.               img:"./assets/img/icons/icon_suivi.png",  
  39.               phaseColor: "color_pink",  
  40.               du: "01 mars 2017",  
  41.               au: "02 avril 2018"  
  42.           }, {  
  43.               libelle: "Clôture",  
  44.               code: "cloture",  
  45.               img:"assets/img/icons/icon_cloture.png",  
  46.               phaseColor: "color_pistach",  
  47.               du: "01 mars 2017",  
  48.               au: "02 avril 2018"  
  49.           }, {  
  50.               libelle: "Bilan d’efficacité",  
  51.               code: "bilan",  
  52.               img:"assets/img/icons/icon_bilan.png",  
  53.               phaseColor: "color_green",  
  54.               du: "01 mars 2017",  
  55.               au: "02 avril 2018"  
  56.           }],  
  57.           livrablesDemmarage: [{  
  58.               title: "Livrable 01",  
  59.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  60.           }, {  
  61.               title: "Livrable 02",  
  62.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  63.           }, {  
  64.               title: "Livrable 03",  
  65.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  66.           }],  
  67.           livrablesPlanification: [{  
  68.               title: "Livrable 04",  
  69.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  70.           }, {  
  71.               title: "Livrable 05",  
  72.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  73.           }, {  
  74.               title: "Livrable 06",  
  75.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  76.           }],  
  77.           livrablesExecution: [{  
  78.               title: "Livrable 07",  
  79.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  80.           }, {  
  81.               title: "Livrable 09",  
  82.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  83.           }, {  
  84.               title: "Livrable 10",  
  85.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  86.           }],  
  87.           livrablesSuivi: [{  
  88.               title: "Livrable 11",  
  89.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  90.           }, {  
  91.               title: "Livrable 12",  
  92.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  93.           }, {  
  94.               title: "Livrable 13",  
  95.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  96.           }],  
  97.           livrablesCloture: [{  
  98.               title: "Livrable 14",  
  99.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  100.           }, {  
  101.               title: "Livrable 15",  
  102.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  103.           }, {  
  104.               title: "Livrable 16",  
  105.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  106.           }],  
  107.           livrablesBilan: [{  
  108.               title: "Livrable 17",  
  109.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  110.           }, {  
  111.               title: "Livrable 18",  
  112.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  113.           }, {  
  114.               title: "Livrable 19",  
  115.               description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  116.           }]  
  117.       },  
  118.       {  
  119.         title: "Titre du projet 02",  
  120.       dateDebut: "21 mars 2017",  
  121.       dateFin: " 01 Janvier 2018",  
  122.       img: "./assets/img/projet_2.jpg",  
  123.       filliale: "F2",  
  124.       doc_fiche_projet: "../pdf/test_pdf.pdf",  
  125.       responsable: "Resposable projet",  
  126.       taille_fiche_projet: "(pdf 4.06 Mo)",  
  127.       objectif: "Lorem ipsum dolor sit amet",  
  128.       type_projet: "Organisation",  
  129.       domaine: "Domaine fonctionnel 01",  
  130.       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.",  
  131.       phases: [{  
  132.           libelle: "demarrage",  
  133.           code: "demarrage",  
  134.           img:"assets/img/icons/icon_demarrage.png",  
  135.           phaseColor: "color_yellow",  
  136.           du: "01 mars 2017",  
  137.           au: "02 avril 2018"  
  138.       }, {  
  139.           libelle: "planification",  
  140.           code: "planification",  
  141.           img:"assets/img/icons/icon_planif.png",  
  142.           phaseColor: "color_cyan",  
  143.           du: "01 mars 2017",  
  144.           au: "02 avril 2018"  
  145.       }, {  
  146.           libelle: "exécution",  
  147.           code: "execution",  
  148.           img:"assets/img/icons/icon_execution.png",  
  149.           phaseColor: "color_orange",  
  150.           du: "01 mars 2017",  
  151.           au: "02 avril 2018"  
  152.       }, {  
  153.           libelle: "Suivi",  
  154.           code: "suivi",  
  155.           img:"assets/img/icons/icon_suivi.png",  
  156.           phaseColor: "color_pink",  
  157.           du: "01 mars 2017",  
  158.           au: "02 avril 2018"  
  159.       }, {  
  160.           libelle: "Clôture",  
  161.           code: "cloture",  
  162.           img:"assets/img/icons/icon_cloture.png",  
  163.           phaseColor: "color_pistach",  
  164.           du: "01 mars 2017",  
  165.           au: "02 avril 2018"  
  166.       }, {  
  167.           libelle: "Bilan d’efficacité",  
  168.           code: "bilan",  
  169.           img:"assets/img/icons/icon_bilan.png",  
  170.           phaseColor: "color_green",  
  171.           du: "01 mars 2017",  
  172.           au: "02 avril 2018"  
  173.       }],  
  174.       livrablesDemmarage: [{  
  175.           title: "Livrable 01",  
  176.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  177.       }, {  
  178.           title: "Livrable 02",  
  179.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  180.       }, {  
  181.           title: "Livrable 03",  
  182.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  183.       }],  
  184.       livrablesPlanification: [{  
  185.           title: "Livrable 01",  
  186.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  187.       }, {  
  188.           title: "Livrable 02",  
  189.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  190.       }, {  
  191.           title: "Livrable 03",  
  192.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  193.       }],  
  194.       livrablesExecution: [{  
  195.           title: "Livrable 01",  
  196.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  197.       }, {  
  198.           title: "Livrable 02",  
  199.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  200.       }, {  
  201.           title: "Livrable 03",  
  202.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  203.       }],  
  204.       livrablesSuivi: [{  
  205.           title: "Livrable 01",  
  206.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  207.       }, {  
  208.           title: "Livrable 02",  
  209.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  210.       }, {  
  211.           title: "Livrable 03",  
  212.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  213.       }],  
  214.       livrablesCloture: [{  
  215.           title: "Livrable 01",  
  216.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  217.       }, {  
  218.           title: "Livrable 02",  
  219.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  220.       }, {  
  221.           title: "Livrable 03",  
  222.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  223.       }],  
  224.       livrablesBilan: [{  
  225.           title: "Livrable 01",  
  226.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  227.       }, {  
  228.           title: "Livrable 02",  
  229.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  230.       }, {  
  231.           title: "Livrable 03",  
  232.           description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."  
  233.       }]  
  234.   }];  
my script is this 
  1. <div>  
  2.     <input type="text" id="search" placeholder="Search to type">  
  3.     
  4.     <ul>  
  5.       <li *ngFor="let p of projetList">  
  6.         {{p.title}} <br> {{p.dateDebut}}  
  7.         <br> {{p.dateFin}} <br><img src="{{p.img}}"/><br>{{p.filliale}}  
  8.         <span *ngFor="let p of projetList.phases">  
  9.             {{p.phases.libelle}}</span>  
  10.           
  11.       </li>  
  12.     </ul>  
  13.   </div>  
 
how to do this please
and thanks in advance  

Answers (5)