单击 link 后按其 value/content 滚动到标签

Question

我有一个 link，其值来自一个 api，该 link 的详细信息稍后会显示在页面中。我想向下滚动到具体细节。详细信息也来自 api，因此我无法为每个可用的详细信息写一个 ID。

例如HTML

<div class="row ml-0 mr-0 pb-2" *ngFor="let advance of advanceDetails">
                <div class="col-4 dl-value"><a (click)="scroll()">{{advance.AdvNumber}}</a></div>
</div>

这是我要滚动的位置：

<div class="row ml-0 mr-0" *ngFor="let advance of advanceDetails">
                <div class="col-5">
                <label class="dl-label">Advance Number</label>
                <p class="dl-value">{{advance.AdvNumber}}</p>
              </div>
            <div class="col-5">
                <label class="dl-label">Other Details</label>
                <p class="dl-value">{{advance.details}}</p>
            </div>
</div>

我想按预先编号的值向下滚动。 ts 中的 scroll() 函数里面有什么？任何帮助，将不胜感激。提前致谢:)

Answer 1

这不是最干净的方法，但您可以使用 ngFor 索引为每个项目设置一个唯一的 ID。

然后，通过唯一ID的id获取元素（并检查元素是否存在），最后用scrollIntoView函数滚动到它。

Component.html

<div class="list" *ngFor="let advance of advanceDetails; let i = index">
  <div class="list-item" id="advanced-{{i}}">
    <p>{{advance.details}}</p>
  </div>
</div>

Component.ts

scroll(id : any) {
  const advancedItemSelected = document.getElementById('advanced-' + id); 
  if (advancedItemSelected) {
    advancedItemSelected.scrollIntoView(true);
  }
}

单击 link 后按其 value/content 滚动到标签

scroll to the tag by its value/content after clicking on a link

html

angular

angular8