Angular 2 RC1 多组件一张表

Question

概述： 我正在使用 Angular 2 和我之前开发的 API 开发一个待办事项列表。目前，前后端的功能已经完成。我的新目标是将待办事项列表的组件链接在一起，在一个 HTML 表格下。待办事项列表位于一个组件 html 文件 (tasklist.component.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 标记，它会丢弃列。忽略丑陋的格式。

web page currently with dev tools

我如何拥有单独的组件并在竞争方面正确利用它们。

Answer 1

请查看this answer。

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