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

中的值

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

在ngClass

中添加新属性

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

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

1 个答案: