Question

我有一个使用*ngFor生成的简单待办事项列表，我试图获取li offsetTop值。我可以为第一个生成的li做得很好，但是我需要能够为任何一个li及其属性设置一个变量。是否有某种形式的索引我可以使用模板变量来实现＆＃34;这个＆＃34;实现

我的模板：

<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

Answer 2

ViewChild应该查询单个孩子。 ViewChildren应该用于查询多个孩子：

 @ViewChildren("todoli") 
    todolis: QueryList<any>;

其中todoli是模板变量名称，todolis是QueryList对象。

在Angular4中引用生成的li中的元素属性

2 个答案: