Javascript 如何切换显示在Angular 2中没有*ngFor的多个列表项的类别+
我正在尝试切换列表中的活动类。 我不想使用*ngFor来显示项目。 我想设计activeclicked的样式Javascript 如何切换显示在Angular 2中没有*ngFor的多个列表项的类别+,javascript,angular,Javascript,Angular,我正在尝试切换列表中的活动类。 我不想使用*ngFor来显示项目。 我想设计activeclicked的样式 您可以在模板中切换变量: <ul class="table-filter"> <li> <span (click)="Filter(''); isOk=!isOk" [ngClass]="isOk? 'success' : 'danger'">All Test Result <
您可以在模板中切换变量:
<ul class="table-filter">
<li>
<span (click)="Filter(''); isOk=!isOk"
[ngClass]="isOk? 'success' : 'danger'">All Test Result
</span>
</li>
</ul>
HTML:
从角度文档:模板
样式表
工作演示:你的ngFor在哪里?稍微清晰一点就好了。它没有ngFor。我需要显示列表中的项目,而不是ngFor@Praveen它有什么区别?@MacleanPinto在所有函数中参数都不同,例如“跳过”、“通过”、“失败”。如果我将使用ngFor,我如何在函数名中传递不同的参数。我尝试了它不工作,你能共享工作链接吗。
<ul class="table-filter">
<li>
<span (click)="Filter(''); isOk=!isOk"
[ngClass]="isOk? 'success' : 'danger'">All Test Result
</span>
</li>
</ul>
isOk: boolean = false;
clickEvent(){
this.isOk = !this.isOk;
}
<ul class="table-filter">
<li>
<span (click)="Filter('')"
[ngClass]="isOk? 'success' : 'danger'">All Test Result
</span>
</li>
</ul>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero) { this.selectedHero = hero; }
}
<ul class="table-filter">
<li><span (click)="toggleFilter('')" >All Test Result</span></li>
<li><span [class.hidden]="hidden.pass" (click)="toggleFilter('pass')" >Pass Test Result</span></li>
<li><span [class.hidden]="hidden.fail" (click)="toggleFilter('fail')" >Fail Test Result</span></li>
<li><span [class.hidden]="hidden.skip" (click)="toggleFilter('skip')" >Skipped Test Result</span></li>
</ul>
hidden = {
pass: false, fail: false, skip: false
}
toggleFilter(key:string) {
if(!this.hidden.hasOwnProperty(key)) {
this.hidden = {
pass: false, fail: false, skip: false
};
return;
}
this.hidden[key] = !this.hidden[key];
}
.hidden { display: none }
<ul class="table-filter">
<li (click)="isClicked = !isClicked" [ngClass]="isClicked? 'active' : ' '"><span (click)="applyFilter('')" >All Test Result</span></li>
<li [ngClass]="{'active':status.pass == true, ' ':status.pass == false}"><span (click)="applyFilter('pass')" >Pass Test Result</span></li>
<li [ngClass]="{'active':status.fail == true, ' ':status.fail == false}"><span (click)="applyFilter('fail')" >Fail Test Result</span></li>
<li [ngClass]="{'active':status.skip == true, ' ':status.skip == false}"><span (click)="applyFilter('skip')" >Skipped Test Result</span></li>
</ul>
status:object = {};
applyFilter(innerText:any) {
this.dataSource.filter = innerText.trim().toLowerCase();
this.status = {
pass: false, fail: false, skip: false
};
this.status[innerText] = true;
this.isClicked = false;
}