DebugElement.children 与 NativeElement.children 的顺序不同

Question

我有一个 html table 并且想要获取所有行。但是，在 DebugElement 或 NativeElement returns 上调用 .children 的顺序不同。

我的table:

<tbody>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</tbody>

在第一个日志中的 DebugElement 和第二个日志中的 NativeElement 上调用 .children（将它们都转换为数组）：

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));

第一个记录以下列表：

[
  <tr>
    <td>2</td>
  </tr>,
  <tr>
    <td>1</td>
  </tr>,
  <tr>
    <td>3</td>
  </tr>
]

而第二个记录如下：

[
  <tr>
    <td>1</td>
  </tr>,
  <tr>
    <td>2</td>
  </tr>,
  <tr>
    <td>3</td>
  </tr>
]

为什么第一个日志中的顺序调换了？ API 行为有区别吗？

Answer 1

这似乎是 Angular 中最近出现的错误：https://github.com/angular/angular/issues/13066。

DebugElement.children 与 NativeElement.children 的顺序不同

DebugElement.children has a different order than NativeElement.children

javascript

angular

angular2-testing