Angular 2 RC1多个组件一张表

Question

概述：我正在使用Angular 2和我之前开发的API开发Todo列表。目前，前端和后端的功能已经完成。我的新目标是将待办事项列表的组件链接在一个HTML表下。todo列表位于一个组件html文件(tasklist.component.html)中，排序组件位于另一个组件(sort.component.html)中。这两个组件位于父组件(todo.components.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

请看一下这个答案。

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