如何在Angular 2+中切换没有*ngFor显示的多个列表项的类答案

【问题标题】：How to toggle class of multiple list items which displayed without *ngFor in Angular 2+如何在Angular 2+中切换没有*ngFor显示的多个列表项的类
【发布时间】：2020-01-23 15:06:57
【问题描述】：

我正在尝试切换<li> 列表中的活动类。我不想使用*ngFor 来显示<li> 项目。我想设置活动（单击）<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();  
  }

【问题讨论】：

你的 ngFor 在哪里？
稍微清晰一点就好了。
它没有 ngFor。我需要在没有 ngFor 的情况下显示列表项
@Praveen 有什么不同？
@MacleanPinto 在所有
函数中，参数都不同。 “跳过”、“通过”、“失败”。如果我将使用 ngFor，我如何在函数名中传递不同的参数。

【解决方案1】：

您可以在模板中切换变量：

<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>

【讨论】：

【解决方案2】：

    <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

【讨论】：

【解决方案3】：

<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;
}

【讨论】：

【解决方案4】：

模板

 <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 }

工作演示：https://stackblitz.com/edit/angular-52vcuj

【讨论】：

我试过它不工作，你能分享工作链接。