Angular2 ng用于复制自定义组件

Question

我有一个Angular2组件MessageBoard，它包含内部组件MessageBoardRow。由于某种原因，甚至在MessageBoardRow html文件中的外部<tbody>元素正在模板中重复。这是非常奇怪的行为，导致html的结构为<tbody><message-board-row><tbody>--stuff here--</tbody><message-board-row></tbody>。我该如何解决这个问题？

消息board.html

<table class="table forum table-striped">
    <thead>
        <tr>
            <th class="cell-stat"></th>
            <th>Topic</th>
            <th class="cell-stat text-center hidden-xs hidden-sm">Replies</th>
            <th class="cell-stat-2x hidden-xs hidden-sm">Last Reply</th>
        </tr>
    </thead>
    <tbody>
        <message-board-row *ngFor="#post of posts" [post]="post"></message-board-row>
    </tbody>
</table>

消息board.component.ts

import {Component, View, OnInit} from 'angular2/core';
import {MessageBoardPostModel} from './../message-board/message-board-post.model';
import {MessageBoardRow} from './../message-board/message-board-row.component';
import {CORE_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'message-board',
    templateUrl: 'app/message-board/message-board.html',
    properties: ['posts'],
    directives: [CORE_DIRECTIVES, MessageBoardRow]
})
export class MessageBoard implements IMessageBoardViewModel {
    public posts: MessageBoardPostModel[];

    constructor() { }
}

export class IMessageBoardViewModel {
    posts: MessageBoardPostModel[];
}

message-board-row.html（注意没有tbody元素！）

<tr>
    <td class="text-center"><i class="fa fa-question fa-2x text-primary"></i></td>
    <td><h4><a href="#">{{post.title}}</a></h4></td>
    <td class="text-center hidden-xs hidden-sm"><a href="#">{{post.comments}}</a></td>
    <td class="hidden-xs hidden-sm"><a href="#">{{post.lastReplyBy}}</a><br /><small><i class="fa fa-clock-o">{{post.lastReplyDate}}</i></small></td>
</tr>

留言板-row.component.ts

import {Component, View} from 'angular2/core';
import {MessageBoardPostModel} from './../message-board/message-board-post.model';
import {CORE_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'message-board-row',
    templateUrl: 'app/message-board/message-board-row.html',
    properties: ['post'],
    directives: [CORE_DIRECTIVES]
})
export class MessageBoardRow implements IMessageBoardRowViewModel {
    public post: MessageBoardPostModel;

    constructor() { }
}

export class IMessageBoardRowViewModel {
    post: MessageBoardPostModel;
}

结果html：

<table class="table forum table-striped">
   <thead>
      <tr>
         <th class="cell-stat"></th>
         <th>Topic</th>
         <th class="cell-stat text-center hidden-xs hidden-sm">Replies</th>
         <th class="cell-stat-2x hidden-xs hidden-sm">Last Reply</th>
      </tr>
   </thead>
   <tbody>
      <!--template bindings={}-->
      <message-board-row>
        <tbody>
            <tr>
                <!-- post stuff here -->
            </tr>
        </tbody>
      </message-board-row>
      <message-board-row>
        <tbody>
            <tr>
                <!-- post stuff here -->
            </tr>
        </tbody>
      </message-board-row>
      <message-board-row>
        <tbody>
            <tr>
                <!-- post stuff here -->
            </tr>
        </tbody>
      </message-board-row>
   </tbody>
</table>