如何将 ngFor 索引变量与哈希符号连接起来？

Question

我正在构建一个 FAQ 部分，该部分通过 ngFor 循环和 FAQ 项目组件填充 FAQ。我希望能够使用锚标记 link 到页面内的位置。为此，我从 npmjs 下载了 scrollTo 模块。 https://www.npmjs.com/package/ng2-scroll-to

此 scrollTo 模块采用 href 参数，我试图在模板表达式中连接 # 和 ngFor 的索引计数器变量，但是当我这样做时出现错误。这是我的代码。

<section id="top">
  <ol>
    <li *ngFor="let item of faqItems; let i=index" scrollTo href={{"#" + i}}>{{item.question}}</li>
  </ol>
<dl>
  <app-faq-item *ngFor="let item of faqItems; let i=index" 
  [question]="item.question" [answer]="item.answer" [attr.id]="i"></app-faq-item>
</dl>
<button scrollTo scrollableElementSelector="#top" scrollYTarget="0">Go top</button>
</section>

错误来自href部分。有人知道如何将 i 变量和哈希符号连接成一个字符串吗？

Answer 1

应该是，

<li *ngFor="let item of faqItems; let i=index" scrollTo href="#{{i}}">{{item.question}}</li>

Answer 2

{{}} 运算符（字符串插值）计算内部变量。所以如果你用 {{i}} 调用你的变量 i 你可以在你的 ngfor 范围内的任何地方访问它，它的值不能在内部改变。所以你可以连接如下：#{{i}}。希望对你有帮助。

Answer 3

我做了翻译...

<li*ngFor="let lang of translate.getLangs()" (click)="changeLanguage(lang)"
      [ngClass]="{'active':lang===translate.currentLang}"> {{ "translate." + [lang] | translate }}  </li>

所以我想类似的东西也应该适用于你的情况。

<li *ngFor="let item of faqItems; let i=index" scrollTo href={{"#"+[i]}}>{{item.question}}</li>

如何将 ngFor 索引变量与哈希符号连接起来？

How do i concatenate the ngFor index variable with a hash symbol?

angular2-template

ngfor

angular