Angular：组件文件中的表行会导致“水合错误”

Question

我有一个表，其中每一行都填充有 *ngFor="..."。每个标签都应该位于一个自己的文件中，我收到了一个奇怪的错误。

亲切的问候

我使用 bootstrap 网站上的随机表开始了一个最小的示例（假设它们生成有效的 HTML）

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
    </tr>
  </thead>
  <tbody>
      <app-table-row *ngFor="let i of [1,2,3,4,5];"></app-table-row>
  </tbody>
</table>

在表行组件中，我有以下代码

<tr>
    <td>
        Value 1
    </td>
    <td>
        Value 2
    </td>
</tr>

我得到了预期的结果——一个包含 5x（值 1，值 2）的表格——但在控制台中，我收到一个错误：

错误错误：NG0500：在水化过程中预期有角度但发现了。

Angular 期望这个 DOM：

……

实际 DOM 是：

……

注意：显示属性只是为了更好地表示 DOM，但对水合不匹配没有影响。

要解决此问题： 检查“_AppComponent”组件是否存在与水合相关的问题 检查您的模板是否具有有效的 HTML 结构 或者通过将

ngSkipHydration

属性添加到模板中的主机节点来跳过水合作用

这是截图

我非常确定 HTML 结构是有效的。不知何故，我想了解为什么会发生这种情况，并且我不想简单地跳过它。

顺便说一句，我尝试了 但这并不能解决问题，因为我希望这些行位于一个自己的组件中（干净代码）

亲切的问候

Answer 1

我想我找到了答案

这里和这里

非常感谢你