[英]How to toggle class of multiple list items which displayed without *ngFor in Angular 2+
我正在嘗試在<li>
列表中切換活動類。 我不想使用*ngFor
來顯示<li>
項目。 我想設置 active(clicked) <li>
樣式。
<ul class="table-filter">
<li><span (click)="Filter('')" >All Test Result</span></li>
<li><span (click)="Filter('pass')" >Pass Test Result</span></li>
<li><span (click)="Filter('fail')" >Fail Test Result</span></li>
<li><span (click)="Filter('skip')" >Skipped Test Result</span></li>
</ul>
Filter(innerText:any) {
this.dataSource.filter = innerText.trim().toLowerCase();
}
您可以在模板中切換變量:
<ul class="table-filter">
<li>
<span (click)="Filter(''); isOk=!isOk"
[ngClass]="isOk? 'success' : 'danger'">All Test Result
</span>
</li>
</ul>
或者在 TypeScript 中創建一個變量:
isOk: boolean = false;
clickEvent(){
this.isOk = !this.isOk;
}
HTML:
<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; }
}
來自角度文檔: https : //angular.io/tutorial/toh-pt2#style-the-selected-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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.