Angular2表行作为组件

Question

我正在实验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

使用现有的表格元素作为选择器table元素不允许将<table-line>元素作为子元素，浏览器只会在找到它们时将其删除。您可以将其包装在组件中，并仍然使用允许的<tr>标签。只是"tr"用作选择器。使用 <template><template>也应被允许，但并非在所有浏览器中都适用。Angular2实际上从不<template>向DOM 添加元素，而只是在内部对其进行处理，因此，它也可以在所有带有Angular2的浏览器中使用。属性选择器另一种方法是使用属性选择器@Component({&nbsp; selector: '[my-tr]',&nbsp; ...})像<tr my-tr>

Answer 2

我发现该示例非常有用，但在2,2.3版本中不起作用，因此经过大量的头部抓挠后，只需进行一些小改动即可使其再次起作用。import {Component, Input} from '@angular/core'@Component({&nbsp; selector: "[my-tr]",&nbsp; template: `<td *ngFor='let item of row'>{{item}}</td>`&nbsp; &nbsp;&nbsp;})export class MyTrComponent {&nbsp; @Input("line") row:any;}@Component({&nbsp; selector: "my-app",&nbsp; template: `<h1>{{title}}</h1>&nbsp; <table>&nbsp; &nbsp; <tr&nbsp; *ngFor="let line of data" my-tr [line]="line"></tr>&nbsp; </table>`})export class AppComponent {&nbsp; title = "Angular 2 - tr attribute selector!";&nbsp; data = [ [1,2,3], [11, 12, 13] ];&nbsp; constructor() { console.clear(); }}

Answer 3

这是一个使用带有属性选择器的组件的示例：import {Component, Input} from '@angular/core';@Component({&nbsp; selector: '[myTr]',&nbsp; template: `<td *ngFor="let item of row">{{item}}</td>`})export class MyTrComponent {&nbsp; @Input('myTr') row;}@Component({&nbsp; selector: 'my-app',&nbsp; template: `{{title}}&nbsp; <table>&nbsp; &nbsp; <tr *ngFor="let line of data" [myTr]="line"></tr>&nbsp; </table>&nbsp; `})export class AppComponent {&nbsp; title = "Angular 2 - tr attribute selector";&nbsp; data = [ [1,2,3], [11, 12, 13] ];}输出：1&nbsp; &nbsp;2&nbsp; &nbsp;311&nbsp; 12&nbsp; 13当然，MyTrComponent中的模板会涉及更多，但是您可以理解。旧的（beta.0）矮人。