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

Question

我正在使用 Angular 2 并希望设置一个页面，其中的内容通过 *ngFor 循环显示，正文通过单独的 div 显示。这些使用插值来显示对象的相关属性。我想link的内容到正文中的相关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

However, as it is in an *ngFor loop dependent on content

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

获取 angular 中 *ngFor 的当前索引

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

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

然后我们可以使用相同的思路创建内容 divs，

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

所以第一个 div 将有一个 id #content0，第二个 #content1 等等，

希望对您有所帮助

Angular 2 navigate to element in *ngFor using interpolation