Question

我正在构建一个FAQ部分，该部分通过ngFor循环和FAQ项目组件填充FAQ。我希望能够使用定位标记链接到页面中的位置。为此，我从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索引变量与哈希符号连接起来？

3 个答案: