从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