Angular2 строки таблицы как компонент

Я экспериментирую с angular2 2.0.0-beta.0

У меня есть таблица, и содержимое строки создается angular2 следующим образом:

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

Теперь это работает, и я хочу инкапсулировать содержимое в компонент "table-line".

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

И в компоненте шаблон имеет контент <tr> <td> .

Но теперь таблица больше не работает. Это означает, что содержимое больше не отображается в столбцах. В браузере инспектор показывает мне, что элементы DOM выглядят следующим образом:

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

Как я могу сделать эту работу?

Ответ 1

использовать существующие элементы таблицы как селектор

Элемент table не позволяет элементам <table-line> в качестве дочерних элементов, и браузер просто удаляет их, когда он их находит. Вы можете обернуть его в компонент и по-прежнему использовать допустимый тег <tr>. Просто используйте "tr" как селектор.

с помощью <template>

<template> также должен быть разрешен, но пока не работает во всех браузерах. Angular2 на самом деле никогда не добавляет элемент <template> в DOM, но только обрабатывает их внутренне, поэтому его можно использовать и во всех браузерах с Angular2.

Селекторы атрибутов

Другим способом является использование селекторов атрибутов

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

который будет использоваться как

<tr my-tr>

Ответ 2

Вот пример использования компонента с селектором атрибутов:

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

Вывод:

1   2   3
11  12  13

Конечно, шаблон в MyTrComponent будет более активным, но вы получите эту идею.

Старый (beta.0) plunker.

Ответ 3

Я нашел пример очень полезным, но он не работал в сборке 2,2,3, поэтому после многократной царапины он снова работал с небольшими изменениями.

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