从 html 的列表中获取位置 X、Y

Question

我有用户可以搜索元素的输入文本，我有列表，我想在用户输入时滚动到此列表中的元素，但我无法获得特定元素的位置 X、Y列表，这是我的代码

<input type="text" (change)="search(event)">
<div *ngFor="let item from list">
{{item.lib}}
</div>

search(event:any){
let itemSearch = event.target.value;
this.list = this.list.filter((val)=>{
if(val.lib.indexOf(itemSearch)>=0){
let scrollY= val.lib.indexOf(itemSearch);
if(scrollY !==-1){
document.querySelector('.scroll')?.scroll (0,Scroll);
}
}
)};
This.list;
}

Answer 1

使用ViewChildren。如果使用模板引用变量

<div #divItem *ngFor="let item from list">
{{item.lib}}
</div>

@ViewChildren('divItem') listDiv:QueryList<ElementRef>

在您的函数搜索中

//first We lookfor the index of the Array
const index=this.list.findIndex(x=>indexOf(word)>=0)
if (index>=0)
{
   //we find in the QueryList the element that has the "index"
   const el=this.listDiv.find((_,i)=>i==index)
   console.log(el.nativeElement.getBoundingClientRect())
   //you can use also
   el.nativeElement.scrollIntoView()
}

注意：您也可以在输入中使用模板引用变量

<input #input type="text" (input)="search(input.value)">

search(word:string){
   ....
}

从 html 的列表中获取位置 X、Y

Get position X,Y from list from html

scroll

arraylist

typescript

angular