Как объединить индексную переменную ngFor с хеш-символом?

Question

Я создаю раздел часто задаваемых вопросов, который заполняет часто задаваемые вопросы с помощью цикла ngFor и компонента элемента FAQ.Я хочу иметь возможность ссылаться на позиции на странице с помощью тега привязки.Для этого я скачал модуль scrollTo с npmjs.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

оператор {{}} (интерполяция строки) оценивает переменную внутри.Поэтому, если вы вызываете переменную i с {{i}}, вы можете получить к ней доступ в любом месте области действия ngfor, ее значение не может быть изменено внутри.так что вы можете объединить, как показано ниже: # {{i}}.надеюсь, это поможет.

Answer 2

для перевода я сделал ...

<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>

Answer 3

должно быть как,

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