Question

所以，当我开始挖掘angular2时，我想我创建了一个列出人物的表格。一个组件用于创建表（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 < / p>

<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>

Answer 2

除非PersonListItemComponent总有一天会变得更复杂，否则我会省去该组件并使用NgFor形式的<template>生成PersonListComponent中的行，这允许重复多个元素。

注意：正如GünterZöchbauer在下面的评论中提到的，某些浏览器目前不支持<template>元素中的<table>元素。所以这种做法可能有点为时过早。

import {Component, Input} from 'angular2/core';
@Component({
  selector: 'person-list',
  template: `
    <table>
      <tbody>
        <template ngFor #person [ngForOf]="people">
          <tr>
            <td>{{person.name}}
            <td>{{person.age}}
        </template>
      </tbody>
    </table>
  `,
  styles: ['td { border: 1px solid gray } ']
})
export class PersonListComponent {
  @Input() people;
}
@Component({
  selector: 'my-app',
  template: `<person-list [people]="people"></person-list>`,
  directives: [PersonListComponent]
})
export class AppComponent {
  people = [ { name: 'Mark', age: "over 40" }, {name: 'cbass', age: "24?" }];
  constructor() { console.clear(); }
}

plunker

创建由多个组件组成的表

2 个答案: