html - 从 Angular4 中生成的 li 引用元素属性

Question

我有一个使用 *ngFor 生成的简单待办事项列表，我正在尝试获取 li 的 offsetTop 值。对于第一个生成的 li，我可以很好地做到这一点，但我需要能够为任何 li 及其属性设置一个变量。是否有某种形式的索引可以与模板变量一起使用以实现“this”效果？

我的模板:

<li class="search-item" #todoli
  *ngFor="let todoItem of todos; let item=index "
  (click)="selectTodo($event, todoItem)"
>
  <span class="todo-item">{{ todoItem.name }}</span>
  <span class="delet-todo" (click)="deleteTodo(item)">&#10005;</span>
</li>

我的组件 TS(缩写为使用 @ViewChild 目标的代码):

  li: any;

  @ViewChild("todoli") 
    todoli;

  selectTodo(event, i) {
    this.selectedItem = i;
    this.li = this.todoli.nativeElement;
    console.log(this.li.offsetTop);
  }

Answer 1

您也可以在没有任何 ViewChild/ViewChildren 引用的情况下执行此操作:

<li class="search-item" #todoli
  *ngFor="let todoItem of todos; let item=index "
  (click)="selectTodo($event, todoItem, todoli)"
>


selectTodo(event, i, todoli) {
  this.selectedItem = i;
  this.li = todoli;
  console.log(this.li.offsetTop);
}

Stackblitz Example

或通过 event.target/currentTarget 没有模板引用变量的事件

<li class="search-item"
  *ngFor="let todoItem of todos; let item=index "
  (click)="selectTodo($event, todoItem)"
>


selectTodo(event, i) {
  this.selectedItem = i;
  this.li = event.target;
  console.log(this.li.offsetTop);
}

Stackblitz Example