Angular子组件在父组件中的视图答案

【问题标题】：Angular child component's view in parent componentAngular子组件在父组件中的视图
【发布时间】：2018-07-06 18:32:43
【问题描述】：

我在父组件的模板中放置了一个表格，该表格的每一行都是一个使用 *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 的东西？

【问题讨论】：

表和它的子标签 (td,th,tr) 并不意味着其中包含任何其他元素（即未知的 dom 元素）。在两者之间插入任何东西都会破坏表格元素的 DOM 层次结构，因此您会得到一种破碎的表格。在浏览器的元素选项卡中查看它正在生成的 dom...！这可能会有所帮助。
首先，避免简单的内联样式，将您的样式放在样式表中或使用 Angular 指令。其次，如果您需要样式方面的帮助，请与我们分享您的完整代码，包括样式。第三，如果您发现难以设置页面样式，请使用一些第三方解决方案，例如 Bootstrap 或 Angular Material。

标签： html css angular

【解决方案1】：

你可能不应该使用

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

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

如果您想重复使用您的数据，您可能应该创建一个服务来提供您的数据。

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

【讨论】：