Question

我知道这个问题已被多次询问，但我在这里有点棘手。

我有一张这样的表：

<table>
 <th>...</th>
 <app-custom-rows *ngFor="let t..." [customAttribute]="somevalue"></app-custom-rows>
</table>

我的app-custom-row组件有一堆行：

<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

所以最后的输出会是这样的：

<table>
 <th>...</th>
 <app-custom-rows>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
 </app-custom-rows>
 <app-custom-rows>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
 </app-custom-rows>
 <app-custom-rows>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
 </app-custom-rows>
</table>

我也尝试过选择器，但是没有元素可以渲染它，而不是那里。并且ng-container根本不会渲染任何东西。那么还有其他任何东西会消失并让它的内容存在。

Answer 1

对于这个常见问题，你有几个解决方案，我建议两个：

使用＆lt; ng-container＆gt;

你说ng-container没有呈现任何内容，但这不是它的工作原理（好吧，除非你将它与ng-template混淆），因为ng-container已经旨在对元素进行分组，不会干扰样式和模板。您可以阅读更多相关信息here。

将组件设置为表格行

其他解决方案根本没有使用任何<tr>，只是让你的<app-custom-rows>表现为表格行（您的浏览器不会注意到差异！）。

要实现此目的，请将以下样式添加到app-custom-row自定义CSS：

:host {
  display: table-row;
}

Answer 2

好的，所以我找到了一个解决方法，虽然是偶然的，但它适用于chrome。所以我需要做的就是将display属性设置为<app-custom-rows>上的内容，并将其内容直接传递给其父级。像这样：

app-custom-row{
 display:contents;
}

Angular 5在表中没有父模板的情况下渲染模板的内容

2 个答案:

使用＆lt; ng-container＆gt;

将组件设置为表格行