Javascript 创建由多个组件组成的表

所以，当我开始深入研究angular2时，我想我创建了一个列出人员的表。一个组件用于创建表（

人员列表

），一个组件用于表中每个人员（

人员列表项

）

容易生气，对吧？有了下面的输出，我意识到这并不容易。如您所见，表行不遵循表结构

通过在inspector中查看html，我们还可以看到

正在破坏表

有没有办法解决这个问题，或者我应该在

元素中创建表行，以免浏览器破坏表？我猜这是一个问题，适用于多个组件会破坏某个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();
    }
}

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[];
};

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

人员列表项.组件

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

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[];
};

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

从'angular2/core'导入{Component}；
let模板=`
{{firstName}}
{{lastName}}
{{age}}
`;
@组成部分({
选择器：'person-list-item'，
模板：模板，
输入：['firstName'，'lastName'，'age']
})
导出类PersonListItemComponent{
公众名字；
公众姓氏；
公众年龄；
}

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

例如

选择器：“tr[人员列表项]”

并像

<tr person-list-item>

---

除非有一天PersonListItemComponent会变得更复杂，否则我将省去该组件，并使用的

形式生成PersonListComponent中的行，它允许重复多个元素

注意：正如Günter Zöchbauer在下面的评论中提到的，一些浏览器目前不支持

元素中的

元素。因此，这种方法可能有点为时过早

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

从'angular2/core'导入{组件，输入}；
@组成部分({
选择器：'人员列表'，
模板：`
{{person.name}
{{person.age}
`,
样式：['td{边框：1px纯灰}']
})
导出类PersonListComponent{
@投入（）人；
}
@组成部分({
选择器：“我的应用程序”，
模板：``，
指令：[PersonListComponent]
})
导出类AppComponent{
people=[{name:'Mark'，age:'over 40}，{name:'cbass'，age:'24？}]；
构造函数（）{console.clear（）；}
}

---

它确实抛出以下异常：“无法绑定到“firstName”，因为它不是已知的本机属性”。请您提供组件的更新代码和/或指向教程或类似教程的链接好吗？要么您的选择器与您要定位的标记不匹配，要么您没有将组件传递给父组件

@component（）

或

@View（）

注释的

提供程序
参数。干杯，让它运行。
的缺点是一些浏览器将它放在
中。Angular2是否以一种特殊的方式处理这一问题，从而避免这一问题？谢谢@GünterZöchbauer，我没有意识到这一问题，我也不知道Angular2是否有任何特殊措施来避免这一问题。我使用
display:table xxx
的答案的解决方法来自聚合物，因为IE（不知道是哪个版本，但我认为最近的版本仍然存在，可能是Safari）忽略所有不允许的标记，包括
，即使根据最新的W3C标准
应该是允许的。因此，您的方法最终应该可以在所有浏览器上使用，但目前您可能会遇到问题。@GünterZöchbauer，事实上，我的Plunker在IE11中不起作用。我会更新答案。