在QueryList中访问ElementRef

Question

我在访问Angular中的ElementRefs列表中的元素时遇到问题。我想遍历它们的整个列表，并相应地更新它们的CSS属性。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('div') my_divs:QueryList<ElementRef>;

  constructor() {
  }

  ngAfterViewInit() {
  }

  do_something() {
      for(var i=0; i<this.my_divs.length; i++){
        //THIS IS WRONG
        this.my_divs[i].nativeElement.style.background_color = "red";
      }
  }

}

然而，我遇到了这个错误：

Element implicitly has an 'any' type because type 'QueryList<ElementRef<any>>' has no index signature. Did you mean to call 'get'?

但是当我将索引更改为get时，我可能会得到未定义...

Answer 1

我确实将装饰器更改为ViewChildren，但还添加了以下内容：

@ViewChildren('div',  {read: ElementRef}) my_divs:QueryList<ElementRef>;

然后，我可以将for循环更改为forEach