Lignes de table Angular2 en tant que composant

J'expérimente angular2 2.0.0-beta.0

J'ai une table et le contenu de la ligne est généré par angular2 de cette façon:

    <table>
        <tr *ngFor="#line of data">
            .... content ....
        </tr>
    </table>

Maintenant, cela fonctionne et je souhaite encapsuler le contenu dans un composant "table-line".

    <table>
        <table-line *ngFor="#line of data" [data]="line">
        </table-line>
    </table>

Et dans le composant, le modèle a le contenu <tr> <td>.

Mais maintenant, la table ne fonctionne plus. Ce qui signifie que le contenu n'est plus affiché dans les colonnes. Dans le navigateur, l'inspecteur me montre que les éléments DOM ressemblent à ceci:

    <table>
        <table-line ...>
            <tbody>
                <tr> ....

Comment puis-je faire fonctionner cela?

utiliser les éléments de table existants comme sélecteur

L'élément table n'autorise pas les <table-line>éléments en tant qu'enfants et le navigateur les supprime simplement lorsqu'il les trouve. Vous pouvez l'envelopper dans un composant tout en utilisant la <tr>balise autorisée . Utilisez simplement "tr"comme sélecteur.

en utilisant <template>

<template>devrait également être autorisé mais ne fonctionne pas encore dans tous les navigateurs. Angular2 n'ajoute en fait jamais d' <template>élément au DOM, mais ne les traite qu'en interne, ce qui peut donc être utilisé dans tous les navigateurs avec Angular2.

Sélecteurs d'attributs

Une autre façon consiste à utiliser des sélecteurs d'attributs

@Component({
  selector: '[my-tr]',
  ...
})

à utiliser comme

<tr my-tr>

J'ai trouvé l'exemple très utile mais il n'a pas fonctionné dans la version 2.2.3, donc après beaucoup de grattage à la tête, il a fonctionné à nouveau avec quelques petits changements.

import {Component, Input} from '@angular/core'

@Component({
  selector: "[my-tr]",
  template: `<td *ngFor='let item of row'>{{item}}</td>`    
})
export class MyTrComponent {
  @Input("line") row:any;
}

@Component({
  selector: "my-app",
  template: `<h1>{{title}}</h1>
  <table>
    <tr  *ngFor="let line of data" my-tr [line]="line"></tr>
  </table>`

})
export class AppComponent {

  title = "Angular 2 - tr attribute selector!";
  data = [ [1,2,3], [11, 12, 13] ];
  constructor() { console.clear(); }
}

Voici un exemple d'utilisation d'un composant avec un sélecteur d'attribut:

import {Component, Input} from '@angular/core';
@Component({
  selector: '[myTr]',
  template: `<td *ngFor="let item of row">{{item}}</td>`
})
export class MyTrComponent {
  @Input('myTr') row;
}
@Component({
  selector: 'my-app',
  template: `{{title}}
  <table>
    <tr *ngFor="let line of data" [myTr]="line"></tr>
  </table>
  `
})
export class AppComponent {
  title = "Angular 2 - tr attribute selector";
  data = [ [1,2,3], [11, 12, 13] ];
}

Production:

1   2   3
11  12  13

Bien sûr, le modèle dans MyTrComponent serait plus impliqué, mais vous voyez l'idée.

Vieux (beta.0) plunker .

L'ajout de «affichage: contenu» au style du composant a fonctionné pour moi.

CSS:

.table-line {
    display: contents;
}

HTML:

<table>
    <table-line class="table-line" [data]="line">
    </table-line>
</table>

Pourquoi ça marche?

Lors de l'instanciation d'un composant, angular (après la compilation) encapsule le contenu du composant dans le DOM comme suit:

<table>
    <table-line>
        <tr></tr>
    </table-line>
</table>

Mais pour que le tableau s'affiche correctement, le tr balises ne peuvent être enveloppées par rien.

Donc, nous ajoutons display: contents, à ce nouvel élément. Si je comprends bien, cela indique à l'explorateur que cette balise ne doit pas être rendue et affiche le contenu interne comme s'il n'y avait pas de retour à la ligne. Ainsi, tant que la balise existe toujours, elle n'affecte pas visuellement la table, et les trbalises sont traitées comme si elles étaient des enfants directs dutable balise.

Si vous souhaitez en savoir plus sur le fonctionnement du contenu: https://bitsofco.de/how-display-contents-works/

essaye ça

@Component({
    selecctor: 'parent-selector',
    template: '<table><body><tra></tra></body></table>'
    styles: 'tra{ display:table-row; box-sizing:inherit; }'
})
export class ParentComponent{
}

@Component({
    selecctor: 'parent-selector',
    template: '<td>Name</td>Date<td></td><td>Stackoverflow</td>'
})
export class ChildComponent{}