Проблема с активным элементом в списке angular

Question

У меня проблема с активным классом в списке / группе списков angular. когда я нажимаю какие-либо элементы, он становится активным, но активный класс не удаляется со старой вкладки. Пожалуйста, помогите мне

 {{itm.name}}  {{itm.name}}    

Answer 1

Похоже, вы используете angular с bootstrap напрямую. Использование ng- bootstrap или ngx- bootstrap angular не должно напрямую использоваться с bootstrap. Это очень плохая практика.

ng- bootstrap option:

https://ng-bootstrap.github.io/# / components / nav / overview

ngx- bootstrap вариант (объединить группы гармошкой):

https://valor-software.com/ngx-bootstrap/# / кнопки https://valor-software.com/ngx-bootstrap/# / гармошкой

Answer 2

я думаю, вам следует изменить id и href для каждого элемента.

также вы должны сделать это для div содержимого вкладки.

<div class="list-group" id="list-tab" role="tablist">
    <span *ngFor="let itm of serviceitms;let i = index">
        <a [class.active]="i == 0" class="list-group-item list-group-item-action" id="list-home-list{{ i }}" data-toggle="list"
                href="#list-home{{ i }}" role="tab" aria-controls="itm.name">{{itm.name}}</a>
    </span>
</div>