I have a table where every row is filled with *ngFor=”…”. And every tag should be in a very own file and I received a strange error.

kind regards

I started a minimal example with a random table from bootstrap website (assuming they produce valid 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>

In table-row component, I have following code

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

I get the expected results — a table with 5x (Value 1, Value 2) — but in console, I receive an error:

ERROR Error: NG0500: During hydration Angular expected but found .

Angular expected this DOM:

…

Actual DOM is:

…

Note: attributes are only displayed to better represent the DOM but have no effect on hydration mismatches.

To fix this problem:
check the “_AppComponent” component for hydration-related issues
check to see if your template has valid HTML structure
or skip hydration by adding the ngSkipHydration attribute to its host node in a template

Im quite sure the HTML structure is valid. And somehow I would like to understand why this happens and I don’t want to simple skip it.

Btw, I tried the <ng-container *ngFor=”…”> but this does not solve the problem, as I want the rows in a very own componen (clean-code)

kind regards