Righe della tabella Angular2 come componente

Sto sperimentando con angular2 2.0.0-beta.0

Ho una tabella e il contenuto della linea è generato da angular2 in questo modo:

 .... content .... 

Ora funziona e voglio incapsulare il contenuto in un componente “table-line”.

  

E nel componente, il modello ha il contenuto

.

Ma ora il tavolo non funziona più. Il che significa che il contenuto non è più mostrato nelle colonne. Nel browser, l’ispettore mi mostra che gli elementi DOM assomigliano a questo:

   ....

Come posso fare questo lavoro?

usa gli elementi della tabella esistenti come selettore

L’elemento table non consente gli elementi

come child e il browser li rimuove solo quando li trova. Puoi racchiuderlo in un componente e utilizzare comunque il tag

consentito. Basta usare "tr" come selettore.

usando

dovrebbe essere consentito, ma non funziona ancora su tutti i browser. Angular2 non aggiunge mai un elemento al DOM, ma li elabora solo internamente, quindi può essere utilizzato in tutti i browser anche con Angular2.

Selettori di attributi

Un altro modo è usare selettori di attributi

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

essere usato come

  

Ecco un esempio che utilizza un componente con un selettore di attributo:

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

Produzione:

 1 2 3 11 12 13 

Ovviamente il modello in MyTrComponent sarebbe più coinvolto, ma tu hai l’idea.

Vecchio plunk (beta.0).

Ho trovato l’esempio molto utile ma non ha funzionato nella versione 2.2.3, quindi dopo molti grattacapi ha funzionato di nuovo con alcune piccole modifiche.

 import {Component, Input} from '@angular/core' @Component({ selector: "[my-tr]", template: `{{item}}` }) export class MyTrComponent { @Input("line") row:any; } @Component({ selector: "my-app", template: `

{{title}}

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

prova questo

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