Дом манипуляции для переворота класса для <i>

Question

Я использую Angular 5 в новом проекте впервые и впервые в его технологии.

Мой component.html выглядит следующим образом: -

<div *ngIf="_leftNavList.length > 0" class="wrapper">
        <nav id="sidebar">

            <ul class="list-unstyled components">

                <li *ngFor="let lx of _leftNavList" (click)="navitemClick($event, lx)">
                    <a [routerLink]=[lx.routerlink]>{{lx.linktext}}</a>
                    <i class="invisible fas fa-circle icon-background greendot"></i>
                </li>

            </ul>
        </nav>
    </div>

Мой файл component.ts выглядит следующим образом: -

import { Component } from '@angular/core';
import { ILeftNavLinks } from '../interfaces/ILeftNavLinks';
import { LeftNavService } from './leftnav.service';

@Component({
    selector: 'app-leftnav',
    templateUrl: './leftnav.component.html',
    styleUrls: ['./leftnav.component.css'],
    providers: [LeftNavService]
})


export class LeftNavComponent {
    public _leftNavList: ILeftNavLinks[] = [];

   constructor(private _navService: LeftNavService) {  }

    ngOnInit(): void {         
        this._leftNavList = this._navService.getNavLinks();          
    }

 navitemClick(event, item){
    //How do i access the dom element and switch the classes
}
}

В зависимости от пользователя, нажмите наЭлемент LI, я хочу изменить невидимый класс на видимый для нажатой LI.Пожалуйста, помогите мне здесь.

Answer 1

используйте [ngClass] для преобразования класса из компонента.

<i [ngClass]="classType" class="fas fa-circle icon-background greendot"></i>

ts

classType = 'invisible'

 navitemClick(event, item){
    this.classType = 'visible'
}

Обновление

Поскольку упомянуто OpДля этого нам нужно добавить новое свойство _leftNavList с именем classType и установить значение по умолчанию invisible.Затем измените значения с navitemClick

 navitemClick(event, item){
     item.classType = 'visible'
 } 

и добавьте новое свойство внутри ngClass

<i [ngClass]="lx.classType" class="fas fa-circle icon-background greendot"></i>