я есть таблица, в которой я хочу отобразить строку таблицы, которая является компонентом. А также я хочу передать данные в этот компонент:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component [data1]="data1" [data2]="data2"></my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

Вmy-componentHTML-это несколько<td></td> с данными отdata1 а такжеdata2.

Но после рендеринга, из-за<my-component></my-component> мой CSS ломается, в результате чего всеmy-component HTML (вся строка таблицы) отображается в первом столбце.

Результат выше:

<table>
    <th>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
    </th>
    <tr>
        <my-component>
            <td>data1.prop1</td>
            <td>data1.prop2</td>
        </my-component>
    </tr>
    <tr *ngFor="let item of list">
        {{item}}
    </tr>
</table>

Я попробовал следующее:

@Component({
    selector: '[my-component]',
    templateUrl: 'my-component.html'
})

<tr my-component [data1]="data1" [data2]="data2"></tr>

Но это приводит к ошибкеCan't bind to 'data1' since it isn't a known property of 'tr'.

Также не могу использовать@Directive как я хочу рендерить HTML.

Как я могу сделать шаблон<my-component></my-component> без<my-component></my-component> тег?

Другие ответы предыдущих версий угловых. Я использую Angular 4.3.4.

Любая помощь будет оценена ..!