scrolltoview в angular 2+ через ID

Question

В моем компоненте есть * ngFor. В него входит множество элементов. Я хотел бы создать кнопку с функцией scrolltoview , но она не работает с числами. Он также работает со строкой, но когда я пытаюсь привязать свойство из элементов ngFor, он всегда запускает ошибку, например: «не функция» или «неопределенное свойство».

Итак, я ищу любой вид Что можно сделать дальше: если я нажал кнопку, он переместит меня в элемент, идентификатор которого совпадает с идентификатором кнопки. Например, если кнопка имеет 2 , она прокручивает меня до элемента second .

Мой код выглядит так:

HTML:

<button (click)="scroll(message.id)">Click to scroll</button>
<div class="message-content" *ngFor="let message of messages">
    <li>
        <div #message.id>
            <mat-card class="message-card">{{message.title}}</mat-card>
        </div>
    </li>
</div>

Я пробую много других методов, но ничего не работает.

public scroll(element: any) {
  element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
}

ИЛИ

@ViewChild("message.id") MyProp: ElementRef;

ngAfterViewInit() {
  this.MyProp.nativeElement.scrollIntoView({ behavior: "smooth", block: "start" });
}

Я знаю, что он работает со строками, но мне нужны числа.