如何使用下拉到 select 元素并向下滚动到 angular 中该元素的详细信息

Question

我的数据是这样的：

groups: [
{
 collections:[]
},
{
 collections:[]
}]

我正在使用嵌套的 *ngFor 在同一页面显示所有组和 collections，当有很多组和 collection.In header 时，列表会变长，我有下拉菜单，每组一个

从那里用户可以 select 任何人 collection，现在我想在 collection 是 [= 时自动向下滚动到页面上的那个 collection 32=]ed.

请注意，每个 collection 在 DOM 中可以有不同的高度，具体取决于 collection 中的详细信息。

Answer 1

假设您知道每个下拉元素的名称，并且在您的 html 中有一个对应的块，您可以这样做：

<div class="container">
  <div id="unique_id_to_use"></div>
</div>

然后你可以使用select事件处理器：

(select)="onSelect($event)"

在你的class中（我是凭记忆写的，语法可能不正确）：

onSelect(event) {
  // Use querySelector with a name that corresponds to the named div
  // passed in from (for example) the value of your dropdown i.e.
  // the aforementioned unique_id_to_use
  let el = document.querySelector(event.target.value);
  if (el) {
    el.scrollIntoView();
  }
}

有多种选项可用于 scrollIntoView()、平滑滚动等，您可以在 MDN page.

上查看

如何使用下拉到 select 元素并向下滚动到 angular 中该元素的详细信息

how to use a drop down to select an element and scroll down to that element's detail in angular

javascript

dom

scroll

ngfor

angular