Angular 2 RC1多个组件一个表

Question

概述：我正在使用Angular 2和我先前开发的API开发Todo列表。 当前，前端和后端的功能已完成。 我的新目标是在一个HTML表下将待办事项列表的组件链接在一起。 待办事项列表位于一个组件html文件（tasklist.component.html）中，而排序组件位于另一个html文件（sort.component.html）中。 这两个组件位于父组件（todo.component.html）下。

父组件（todo.component.html）：

<h1>
  {{title}}
</h1>

<app-addtask> </app-addtask>
<app-search> </app-search>

<table border="1" style="width:100%">

  <app-sort> </app-sort> <!-- Headers -->

  <app-tasklist> </app-tasklist> <!-- Content -->

</table>

任务列表组件：

<td (click)=completeTask(item) style="width:75px;">
    <input type="checkbox" name="complete" *ngIf="!item.IsComplete" >
    <input type="checkbox" name="complete" *ngIf="item.IsComplete" checked="checked">
</td>

<td (click)=completeTask(item)> 
    <p *ngIf="item.IsComplete" style="text-decoration: line-through;">  {{item.Name}}  </p>
    <p *ngIf="!item.IsComplete" >  {{item.Name}}  </p>
</td>
<td style="width:250px;"(click)=completeTask(item) > 
    <p *ngIf="item.IsComplete" style="text-decoration: line-through;">  {{item.DueDate}}  </p>
    <p *ngIf="!item.IsComplete" >  {{item.DueDate}}  </p>
</td>

<!--<app-deletetask></app-deletetask>-->

<td style="width:115px;">
    <button type="button" (click)="deleteTask(item, $event)">Delete</button> 
</td>

排序组件：

  <td style="width:75px;" (click)="Sort('iscomplete')"><a>Complete</a></td>
  <td (click)="Sort('name')"><a>Name</a></td>
  <td style="width:250px;" (click)="Sort()"><a>Due Date</a></td>
  <td style="width:115px;">Option</td>

如果将所有组件组合在一起，则可以正确显示数据。 但是，按照现在的方式，正在生成一个tbody标签，该标签抛出列。 忽略丑陋的格式。

当前带有开发工具的网页

我如何拥有单独的组件，以及如何相对于竞争对手正确使用它们。

Answer 1

请看看这个答案 。

基本上，如果您想要表的结构，请尝试使用属性选择器而不是自定义标记放置适当的组件。