Угловой 2 RC1 Несколько компонентов один стол

Question

Обзор: Я разрабатываю список Todo, используя Angular 2 и API, которые я разработал ранее. В настоящее время функциональность переднего и заднего конца завершена. Моя новая цель - связать компоненты списка задач вместе, под одной таблицей HTML. Список todo находится в одном компонентном 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> 

Tasklist компонент:

<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.

В принципе, если вы хотите, чтобы структура таблицы пыталась поместить соответствующие компоненты с селектором атрибутов, а не с помощью специального тега.