Verschachtelte Schleifen im Winkel 2

Möchte ich die Daten anzeigen, die von diesem array: 

array = [
{nom: nom1, composants: [composant11, composant12]}, 
{nom: nom2, composants: [composant21, composant22]}
]

Ich anzeigen wollen es auf diese Weise in einer Tabelle:

composant nom

composant11 nom1

composant12 nom1

composant21 nom2

composant22 nom2

Dies ist mein code: 

<table>
<tr>
<th>Composant</th>
<th>Nom</th>
</tr>
<template *ngFor="let item of array">
<template *ngFor="let composant of item.composants">
<tr>
<td>{{composant.nom}}</td>
<td>{{composant.code}}</td>
</tr>
</template>
</template>
</table>

Mein browser zeigt nichts an. Ich Frage mich, ob es wirklich eine Weise zu tun, dass in der Vorlage. Oder sollte ich doch zuerst verwandeln Sie das array in der Komponente, bevor es angezeigt wird.
Jede Anregung wird dankbar sein!

  • nur eine Frage ...ist dein array ein public? oder private?.. kann youpost auch deinen ts-code?
  • Das array ist öffentlich
InformationsquelleAutor edkeveked | 2017-06-19
  1. 17

    Versuchen Sie dies:

    rows = [
    {nom: "nom1", composants: ["composant11", "composant12"]}, 
    {nom: "nom2", composants: ["composant21", "composant22"]}
];

<table>
    <ng-container *ngFor="let row of rows">
        <tr *ngFor="let composant of row.composants">
            <td> {{ composant }} </td>
            <td> {{ row.nom }} </td>
        </tr>  
    <ng-container>  
</table>
    • dies druckt die Ausgabe von array. Aber ich möchte die Anzeige innerhalb einer Tabelle, wie ich das wissen in meiner Frage.
    InformationsquelleAutor Faly
  2. 1

    Verwende ich eine etwas andere syntax, die bekam den job zu erledigen

    http://plnkr.co/edit/Z94BxYiu2UTU7h3oySui?p=preview

    <table>
<tr>
<th>Composant</th>
<th>Nom</th>
</tr>
<template ngFor #item [ngForOf]="array">
  <template ngFor #noo [ngForOf]="item.composants">
    <tr>
      <td>{{noo}}</td>
      <td>{{item.nom}}</td>
    </tr>
    </template>
</template>
</table>
    InformationsquelleAutor Milan
  3. 0

    Code ändern, wie unten:

        <table>
<tr><th>Composant</th> 
<th>Nom</th>
</tr>
<template *ngFor="let item of array">
<template *ngFor="let composant of item.composants">
 <tr> <td>{{item.nom}}</td> <td>{{composant|json}}</td> 
</tr>
</template> 
</template> 
</table>
    • Es macht keinen Unterschied
    • Es macht Unterschied ,weil die Artikel enthalten nom und composants aber composant nicht enthalten nom..
    InformationsquelleAutor vishal paalakurthi
Schreibe einen Kommentar