Question

Angular 中的 document.querySelector

2021-01-27

9643

javascript angular queryselector

我有一个列表，其中每个 li 都有唯一的 data-id 。

<ul class="list">
  <li class="list__el"
      *ngFor="let item of cars"
      data-id="{{ item.id }}">
  </li>
</ul>

在 JS 中我会写

let myLi = document.querySelector(`.list__el[data-id="${item.id}"]`)

如何为 Angular 正确地重写它？

Answer 1

使用 @ViewChildren 和模板引用，例如 #listItem 。

@Component({
template: `<ul class="list">
  <li #listItem class="list__el"
      *ngFor="let item of cars"
      data-id="{{ item.id }}">
  </li>
</ul>`
})
export component MyComponent implements AfterViewInit {

  // Note that the parameter here relates to the #listItem in the template.
  @ViewChildren('listItem')
  public listItems!: QueryList<ElementRef<HTMLLIElement>>

  public ngAfterViewInit() {
    console.log(
      this.listItems.find(itm => 
        itm.nativeElement.getAttribute('data-id') === 'my-element-id'
      )
    )
  }
}