remplissage d'un tableau avec angular2 *ngFor?

Je suis en train de remplir un bootstrap de style de tableau avec les informations récupérées à partir d'une requête get.

Je reçois l'information, mais elle n'est pas sortie de la manière désirée.

Voici mon code;

vue de composant

<div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <view-employee-list [employee]="employee" *ngFor="let employee of employees" ></view-employee-list>
        </tbody>
    </table>
</div>

de vue de l'employé-composant de liste

<tr>
     <td>{{employee.name}}</td>
</tr>

Cependant, il ne produit pas le résultat souhaité, voici une image de l'arbre du dom;

remplissage d'un tableau avec angular2 *ngFor?

et pour ref le genre de tableau que je suis en train de dupliquer;

w3schools bootstrap table

J'ai pensé que la syntaxe du modèle sera ignoré et les dom pour les interpréter ce qui était contenu dans le modèle de conteneur pour être à la "racine" de niveau, mais ce n'est pas le cas.

Je ne suis pas sûr de savoir comment remédier à ce problème, et a été en espérant que quelqu'un pourrait donner quelques conseils?

InformationsquelleAutor confusedandenthused | 2016-11-17
  1. 12

    Si vous utilisez un attribut sélecteur de la place et de modifier la vue de n'en créer les colonnes td à l'intérieur de ce modèle.

    <div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr view-employee-list [employee]="employee" *ngFor="let employee of employees" ></tr>
        </tbody>
    </table>
</div>

    de vue de l'employé-composant de liste

    selector: '[view-employee-list]'
template: '<td>{{employee.name}}</td>'
    • La bonne solution ...
    • Je ne savais pas qu'on pouvait le faire avec des composants ! Je pensais que nous avions à faire à une directive, génial 🙂
    • Il fonctionne très bien, mais c'est déconseillé par Angulaire de l'équipe. angulaire.io/guide/styleguide#composants-comme-éléments
    InformationsquelleAutor Igor
  2. 4

    Essayer quelque chose comme ce réglage:

    <tbody>
  <tr view-employee-list [employee]="employee" *ngFor="let employee of employees"></tr>
</tbody>

    Ensuite, éliminer la <tr> balises à l'intérieur du composant et de le faire en fonction de l'attribut `"[view-employé-liste]". De cette façon, l'étiquette fait partie du modèle wrapper.

    InformationsquelleAutor rfornal