Как я могу установить класс для первого элемента в массиве по умолчанию, удалить его и применить к другому элементу по щелчку?

Question

В Angular вы можете использовать ngClass для условного применения вашего класса следующим образом.

<div
    *ngFor="let group of step.groups; let firstItem = first;"
    class="layout--stepper__subgroup"
    ngClass]="{'is-active': group.prop === activeProp}"
    (click)="scrollToSection(group)">
    p class="t-data">{{group.header}}</p>
</div>

scrollToSection(group) {
    this.activeProp = group.prop;
    let scroll = document.querySelector(`#${group.prop}`).scrollIntoView();
}

Теперь, когда я нажимаю на элемент в моем списке, класс is-active будет применяться к этому конкретному элементу списка.Однако что, если я хочу применить is-active к первому элементу в списке по умолчанию?

Если я изменю свой код на:

ngClass]="{'is-active': group.prop === activeProp || firstItem}"

Теперь оба первых элемента насписок и выбранный элемент будут иметь класс is-active.Как установить для первого элемента в списке класс is-active по умолчанию, а затем удалить его, когда я щелкну другой элемент в списке?

Answer 1

Если вам известно значение prop для вашего firstItem, самый простой способ сделать это - изначально установить activeProp на это значение.

Если значение невам известно, попробуйте установить is-active на firstItem, только если activeProp не определено, что будет, если ни один элемент не выбран.

[ngClass]="{'is-active': group.prop === activeProp || (firstItem && !activeProp)}"

Answer 2

Инициализируйте activeProp как реквизит первой группы массива groups:

if(this.step.groups.length > 0)
    this.activeProp = this.step.groups[0].prop;

И ваше первое условие:

[ngClass]="{'is-active': group.prop === activeProp}"

будет работать гладко.