Angular2表行作为组件

我正在试验angular2 2.0.0-beta.0

我有一个表，线的内容是由angular2这样生成的：

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

现在这个工作，我想封装内容到一个组件“表格线”。

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

在组件中，模板有<tr> <td>内容。

但现在桌子不再工作了。 这意味着，内容不再显示在列中。 在浏览器中，检查员告诉我，DOM元素看起来像这样：

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

我怎样才能做这个工作？

Answer 1

使用现有表格元素作为select器

table元素不允许<table-line>元素作为子元素，而浏览器只是在find它们时将其删除。 你可以把它包装在一个组件中，然后使用允许的<tr>标签。 只需使用"tr"作为select器。

使用<template>

应该允许<template> ，但在所有的浏览器中都不起作用。 Angular2实际上从不向DOM添加一个<template>元素，而只是在内部处理它们，所以这个也可以在Angular2的所有浏览器中使用。

属性select器

另一种方法是使用属性select器

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

被用来像

 <tr my-tr> 

Answer 2

以下是使用具有属性select器的组件的示例：

 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） 闯入者

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