Создать динамический c идентификатор и связать их

Question

Я использую компонент bootstrap, свернуть. Используя ngFor, я пытаюсь сгенерировать динамический c идентификатор и связать его.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Итак, я хочу установить:

<a href="#collapse{{i}}">.... <div id="colapse{{i}}">...

Если бы кто-нибудь мог дать мне какой-нибудь совет, я был бы признателен.

Answer 1

Чтобы сгенерировать динамический c id, вы можете сделать это:

In html:

<div *ngFor="let element of element;let index=index">
    <a class="btn btn-primary" data-toggle="collapse" href="{{cssClassByIndex(index)}}" role="button"
        aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>

    .
    .
    .
    <div class="collapse" id="{{cssClassByIndex(index)}}">
        <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
            keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
    </div>
</div>

Nel .ts

cssClassByIndex(index:number) {
 return 'collapse'+index;
}

Практически вы можете реализовать метод, который делает конкатенацию 'collapse' с индексом, e вызывая его с интерполяцией в html

Answer 2

Вы можете легко использовать этот синтаксис, следующее будет работать, как и ожидалось:

<div *ngFor="let element of element;let index=index">
    <a href="{{'#tab_' + your expression here}}"></a>
</div>

Вы также можете связать, используя префикс attr, например:

<div *ngFor="let element of element;let index=index">
    <a [attr.href]="'#tab_' + your expression here"></a>
</div>