创建由多个组件组成的表

Question

所以,当我开始挖掘angular2时,我想我创建了一个列出人物的表格.一个用于创建table(person-list)的组件,另一个用于表(person-list-item)中每个人的组件.

容易发黑,对吗？通过以下输出,我意识到这并不容易.如您所见,表行不遵循表结构.

通过在检查器中查看html,我们也可以看到它<person-list-item>正在破坏表.

有没有办法解决这个问题,或者我应该只是在<person-list>元素中创建表行,以免让浏览器破坏表格？我想这是一个适用于多个组件会破坏某个DOM元素的其他情况的问题.

app.component

import {PersonListComponent} from './person-list.component';
import {Component} from 'angular2/core';

let template=`
<person-list></person-list>
`;

@Component({
    selector:'appz',
    template:template,
    providers:[PersonService],
    directives:[PersonListComponent]
})

export class AppComponent {
    public title;

    constructor(private _personService: PersonService) { 
        this.title=_personService.getPersons();
    }
}

person-list.component

import {Component} from 'angular2/core';
import {PersonListItemComponent} from './person-list-item.component';
import {Person} from './person';

let template=`
    <h3>Persons</h3>
    <table class="table">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <person-list-item 
                [firstName]="'John'"
                [lastName]="'Doe'"
                [age]='44'>
            </person-list-item>
            <person-list-item 
                [firstName]="'Foo'"
                [lastName]="'Bar'"
                [age]='34'>
            </person-list-item>
        </tbody>
    </table>
`;

@Component({
    selector:'person-list',
    template:template,
    directives:[PersonListItemComponent],
    inputs:['persons']
})
export class PersonListComponent {
    public persons: Person[];
};

person-list-item.component

import {Component} from 'angular2/core';

let template=`
    <tr>
        <td>{{firstName}}</td>
        <td>{{lastName}}</td>
        <td>{{age}}</td>            
    </tr>
`;

@Component({
    selector:'person-list-item',
    template: template,
    inputs:['firstName', 'lastName', 'age']
})

export class PersonListItemComponent {
    public firstName;
    public lastName;
    public age;
}

Answer 1

只需使用属性或类选择器而不是组件的标签选择器

例如,selector: 'tr[person-list-item]'并使用它

<tr person-list-item>

或selector: 'tr[personListItem]'与<tr personListItem>

或者,您可以使用其他方法来构建表.例如,如https://github.com/dart-lang/polymer-dart-patterns/blob/b3e8a306d05a9f3aae695a75ca5f4e3dccd64cf5/web/control_flow/using_template_repeat_with_a_table_row/my_element.html所示,用于Polymer的类似用例,其中CSS用于设置div为表现得像一个table/ tr/td

<style>
  .table {
    display: table;
  }
  .row {
    display: table-row;
  }
  .cell {
    display: table-cell;
  }
</style>
<div class="table">
  <template is="dom-repeat" items="{{fruits}}" as="fruit">
    <div class="row">
      <div class="cell">{{fruit}}</div>
    </div>
  </template>
</div>