javascript - 在 Angular Bootstrap 的 ngb-tabset 中获取 Select DOM Element 的值

Question

我在 *ngFor 循环中有以下 DOM 元素（索引设置为 idx）：

<div class="row" *ngFor="let item of myArray let idx=index">
    <select [id]="'myID' + idx"></select>
</div>

在我的组件中，我需要获取元素的值并尝试了这个：

export class HelloComponent{
    constructor() {}

    ngAfterViewInit(){
       console.log((<HTMLSelectElement>document.querySelector('#myID0')).value);
    }
}

它抛出以下错误：

ERROR TypeError: Cannot read property 'value' of null

当我这样做时，console.log(document.querySelector('#myID0'))我会打印出元素。由于某种原因，我无法获得价值......

更新

我错过了我的选择在一个ngb-tabset

您可以在此处查看该问题的重现。完整的 HTML 代码是：

<ngb-tabset>
  <ngb-tab>
      <ng-template ngbTabTitle="">Tab</ng-template>
        <div class="row" *ngFor="let item of myArray let idx=index">
          <select [id]="'myID' + idx">
            <option>Hello</option>
          </select>
        </div>
      <ng-template ngbTabContent=""></ng-template>
  </ngb-tab>
</ngb-tabset>

标签： javascriptangular

Answer 1

在使用 Angular 时，我会尽量避免以这种方式访问​​ DOM。你应该看看实现viewchildren。这应该为您提供有关该元素所需的所有信息。抱歉，自从您进行了stackblitz以来，答案已经发生了巨大变化

public @ViewChildren('idx')public domElement: QueryList<any>; // be sure to import.

<select #idx> // in HTML

@ViewChildren 可用于返回标记元素的数组。会这样做。这将返回一个*ngFor元素数组。

然后，您可以设置一些简单的东西来找到正确的元素。

const test = this.domElements.find(element => element.yourvalue === whatYouExpect);