用于翻转类<i>的 dom 操作

Question

我第一次在新项目中使用 Angular 5，并且是他的技术新手。

我的组件.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>

我的组件.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 提到了 ngfor，我们需要向_leftNavList添加一个名为classType的新属性并将默认值设置为invisible。然后从navitemClick

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

在ngClass内添加新属性

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