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

Question

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>

и в компоненте шаблон имеет содержимое

.

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

    <table>

        <table-line ...>

            <tbody>

                <tr> ....

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

458 4

angular

4 ответов:

Comments

Ничего не найдено.

Günter Zöchbauer · Accepted Answer · 2017-02-14 12:28:36

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

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

используя <template>

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

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

другой способ-использовать селекторы атрибутов
@Component({
  selector: '[my-tr]',
  ...
})
для использования как
<tr my-tr>

Mark Rajcok · Accepted Answer · 2016-10-06 18:10:34

вот пример использования компонента с помощью селектора атрибутов:
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 будет более вовлечен, но вы получите идею.

старый (бета.0) plunker.

DudeOfDoom · Accepted Answer · 2016-12-22 18:04:31

Я нашел пример очень полезным, но он не работал в сборке 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(); }
}

Matsteel · Accepted Answer · 2018-03-15 19:29:56

попробуй такое

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