可以使用什么技術來訪問放置在* ngFor下的DOM元素（獲取和設置值）

Question

我想訪問<span> ， <select>元素。 我的代碼模板如下

<div *ngFor="---">
  <div>
    <span></span>
    <select>
     <option></option>
     <option></option>
     <option></option>
    </select>
  </div>
</div>

Answer 1

使用QueryList和ViewChildren獲取*ngFor元素；

  ngAfterViewInit() {
    console.log(this.sp1)
  }

  @ViewChildren('swrapper') sp1: QueryList<any>;

HTML：

<div #wrapper> 
    <div *ngFor="---; i = index">
      <div>
        <span></span>
        <select [(ngModule)]="'selectElement' + i">
         <option></option>
         <option></option>
         <option></option>
        </select>
      </div>
    </div>
</div>

Answer 2

您可以在Angle 2+中使用以下技術。 嘗試獲取Select，例如：

<div #wrapper> 
    <div *ngFor="---; i = index">
      <div>
        <span></span>
        <select [(ngModule)]="'selectElement' + i">
         <option></option>
         <option></option>
         <option></option>
        </select>
      </div>
    </div>
</div>

並在同一組件.ts文件中：

 @ViewChildren('wrapper') wrapper: QueryList<any>;

然后您需要做的就是使用它：

this.wrapper

或通過使用所有各種selectElement＃引用ngFor中的索引