如何使用下拉菜单选择元素并向下滚动到angular中元素详细信息

<select [(ngModel)]="selectedElement">
  <option *ngFor="let element of elements" [value]="element">{{ element.name }}</option>
</select>

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  elements: any[] = [
    { name: 'Element 1', details: 'Details 1' },
    { name: 'Element 2', details: 'Details 2' },
    { name: 'Element 3', details: 'Details 3' }
  ];
  selectedElement: any;

  @ViewChild('detailsSection') detailsSection: ElementRef;

  onElementChange() {
    const selectedElementIndex = this.elements.findIndex(element => element === this.selectedElement);
    const detailsSectionElement = this.detailsSection.nativeElement;

    // 滚动到选定元素的详细信息
    detailsSectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

<div #detailsSection>
  <!-- 详细信息部分的内容 -->
</div>