父组件

Question

我在父组件的模板中放置了一个表，该表的每一行都是一个用* ngFor循环的子组件。

父模板：

<table style="width:100%">
    <tr>
        <th>Id</th>
        <th>First Name</th> 
        <th>Last Name</th>
    </tr>
    <app-liste-client-row *ngFor="let cli of clients" [client]="cli" >
    </app-liste-client-row>
</table>

模板子：

<tr>
    <td>{{client.id}}</td>
    <td>{{client.firstName}}</td>
    <td>{{client.lastName}}</td>
</tr>

好处是我可以看到桌子上的所有线条。

不好的一点是我不能使数据行与我的表的列匹配。我尝试使用css（使用具有边距和填充的ID），但它看起来不像是一个正确的解决方案，因为我必须使用值。我也不想将我的循环直接编码到我的父组件中。

使用包含父组件和子组件的干净表是最简单或更合适的解决方案是什么？或者我错过了一些关于CSS的东西？

Answer 1

您可能不应该使用

test_df

作为您的孩子组件。因为tr包含在表中。 如果要在应用程序的许多部分中重用它，则应该为某些内容创建一个组件。我假设你将多次使用整张桌子。所以你应该只有你的父组件。

如果要重用数据，则应该创建一个提供数据的服务。

但如果您仍想这样做，可以尝试使用templates like in here。