3

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?

fwind
  • 1,274
  • 4
  • 15
  • 32

1 Answers1

1

This seems to be a recent bug in Angular: https://github.com/angular/angular/issues/13066.

fwind
  • 1,274
  • 4
  • 15
  • 32