I have an html table and want to get all rows (s). However calling .children
on a DebugElement or a NativeElement returns a different ordering.
My table:
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
Calling .children
on a DebugElement in the first log and on a NativeElement in the second log (converting them both to arrays):
const table: DebugElement = fixture.debugElement.query(By.css('table'));
console.log(table.query(By.css('tbody')).children.map(e => e.nativeElement));
console.log(Array.from(table.query(By.css('tbody')).nativeElement.children));
The first one logs the following list:
[
<tr>
<td>2</td>
</tr>,
<tr>
<td>1</td>
</tr>,
<tr>
<td>3</td>
</tr>
]
Whereas the second one logs the following:
[
<tr>
<td>1</td>
</tr>,
<tr>
<td>2</td>
</tr>,
<tr>
<td>3</td>
</tr>
]
Why is the order in the first log swapped? Is there a difference in the API behaviour?