Angular2 Tabellenzeilen als Komponente

Ich bin das Experimentieren mit angular2 2.0.0-beta.0

Ich habe eine Tabelle und der Inhalt der Zeile wird erzeugt, indem angular2 diese Weise:

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

Nun das funktioniert und ich will zu Kapseln, der Inhalt in eine Komponente "Tabelle-Zeile".

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

Sowie in der component, die Vorlage hat die <tr><td> content.

Aber jetzt ist die Tabelle nicht mehr arbeiten. Das bedeutet, der Inhalt wird nicht mehr angezeigt in den Spalten.
Im browser, der inspector zeigt mir, dass der DOM-Elemente wie folgt Aussehen:

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

Wie kann ich diese Arbeit machen?

InformationsquelleAutor der Frage fbenoit | 2016-01-01

  1. 70

    verwenden Sie vorhandene Tabelle Elemente als Selektor

    Dem table-element erlaubt nicht <table-line> Elemente, wie die Kinder, und der browser löscht Sie, wenn es Sie findet. Sie können wickeln Sie es in eine Komponente und trotzdem die erlaubt <tr> tag. Verwenden Sie einfach "tr" als Selektor.

    mit <template>

    <template> zugelassen werden sollten, als gut, aber funktioniert noch nicht in allen Browsern. Angular2 eigentlich nie fügt eine <template> - element, die DOM -, sondern nur Prozesse, die Sie intern, also dies kann verwendet werden, in allen Browsern mit Angular2 als gut.

    Attribut-Selektoren

    Andere Möglichkeit ist die Verwendung von Attribut-Selektoren

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

    verwendet werden, wie

    <tr my-tr>

    InformationsquelleAutor der Antwort Günter Zöchbauer

  2. 21

    Hier ist ein Beispiel für die Verwendung einer Komponente mit einem Attribut-Selektor:

    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] ];
}

    Ausgabe:

    1   2   3
11  12  13

    Natürlich die Vorlage in der MyTrComponent wäre mehr beteiligt, aber Sie bekommen die Idee.

    Alten (beta.0) plunker.

    InformationsquelleAutor der Antwort Mark Rajcok

  3. 21

    Ich fand das Beispiel sehr hilfreich, aber es hat nicht funktioniert in der 2,2.3 bauen, so nach viel Kopfzerbrechen gemacht, es funktioniert wieder mit ein paar kleinen Veränderungen. 

    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(); }
}

    InformationsquelleAutor der Antwort DudeOfDoom

  4. -1

    versuchen, diese

    @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{}

    InformationsquelleAutor der Antwort Matsteel

Schreibe einen Kommentar