angular 图斑点击，列表选中并滚动到中间位置

如图所示：

 

html代码：

1. #listContainer

2. [attr.data-id]="center.id"

     <div class="resTableCss" #listContainer><div *ngFor="let center of tbList" [attr.data-id]="center.id" class="res-item" [ngStyle]="{background:center.flag?'#2b5a87':'rgba(27, 144, 255, 0.2)','borderRight':center.flag?'0.20833vw solid#cbd70d':'0.20833vw solid rgba(27, 144, 255, 0.2)'}" (click)="tbSelect(center)"><div class="detail"><div class="detail-title"><span>{{ center.source }}</span></div><div class="detail-desc"><span>编号：{{ center.code }}</span></div></div></div></div>

ts代码：

  @ViewChild('listContainer', { static: false }) listContainer: any;// 滚动到指定项scrollToItem(id: string) {const item = this.listContainer.nativeElement.querySelector(`div[data-id="${id}"]`);if (item) {item.scrollIntoView({ behavior: 'smooth', block: 'center' });}}