从 Angular 2 中获取所有选项

Question

文档中有一个选择，即：

<select tabindex="1" size="5" name="abc" multiple>
    <option value>Select a value.</option>
    <option value>option 1</option>
    <option value>option 2</option>
    <option value>option 3</option>
    <option value>option 4</option>
</select>

我可以在 javascript/typescript 中执行以下操作：

    let select = document.querySelector("select").children;
    for(let i= 0; i<select.length; i++) {
        console.log(select[i].innerHTML);
    }

但 Angular 2 类中的相同代码会给我这个：

<select tabindex="1" size="5" name="abc" multiple>
    <option value>Select a value.</option>
    <option value>__</option>
    <option value></option>
</select>

我怀疑可能是 Angular 2 在文档完全加载之前运行了它。但 Angular 2 脚本等位于底部，我尝试在

中运行它们

window.onload and $(document).ready(...);

它仍然不会给我选项。有什么想法吗？

Answer 1

不要在 Angular 中直接操作 DOM。

@Directive({ selector: 'option' })
export class OptionDirective {}

xxx.component.ts

@Component({
  selector: 'some-selector'
})
export class SomeComponent implements AfterContentInit {
  @ContentChildren(OptionDirective) options: QueryList<OptionDirective>;

  ngAfterContentInit() {
    // do something with list items
    // loop through all list of option, then do something you want.
  }
}

@ContentChildren

QueryList