Angular 2使用插值导航到* ngFor中的元素

Question

我正在使用Angular 2并希望设置一个页面，其中的内容通过*ngFor循环显示，并且正文通过单独的div显示。这些使用插值来显示对象的相关属性。我希望内容链接到正文中的相关div。

要显示左侧的内容：

<div class = "contents">
  <div *ngFor = "let disp of content">
    {{disp.heading}}
  </div>
</div>

在右侧显示文章

<div *ngFor="let disp of content>
  {{disp.header}}
  {{disp.body}}
<div>

这类似于Angular2 Routing with Hashtag to page anchor

中的查询

然而，由于它在依赖于内容的*ngFor循环中，abd使用插值，我无法看到在循环中识别不同div的方法，因为它们是动态提供的。

Answer 1

  

但是，因为它位于依赖于内容的* ngFor循环中

不一定，您可以使用预定义的*ngFor变量

获取角度为index的当前索引

因此，我们可以设置指向href=#content{{i}}的链接，第一个元素为href=#content0，第二个元素为href=#content1，依此类推，

<div *ngFor="let disp of content; let i=index">
    <a href="#content{{i}}"> {{disp.heading}} </a>
</div>

然后我们可以使用相同的想法创建内容div，

<div *ngFor="let disp of content; let i=index" id="content{{i}}">
    <h1> {{disp.header}} </h1>
    <p> {{disp.body}} </p>
</div>

所以第一个div的ID为#content0，第二个div为#content1，依此类推，

working example

希望这有帮助