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

【问题标题】：How do i concatenate the ngFor index variable with a hash symbol?如何将 ngFor 索引变量与哈希符号连接起来？
【发布时间】：2018-12-02 20:06:47
【问题描述】：

我正在构建一个常见问题解答部分，该部分通过一个 ngFor 循环和一个常见问题解答项目组件填充常见问题解答。我希望能够使用锚标记链接到页面内的位置。为此，我从 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 变量和 hashsymbol 加入一个字符串吗？

【问题讨论】：

试试这个href="{{'#' + i}}"

标签： angular angular2-template ngfor

【解决方案1】：

应该是这样的，

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：