Angular 4-在 *ngfor中切换背景颜色

Question

我是Angular 4的初学者。我需要帮助来与ngstyle建立风格。单击一个<li>时，我需要设置样式，因为我这样做了，因此我将颜色更改为所有<li>，我只需要在<li>上更改颜色。

。

模板：

<div  class="div1" id="sp1" align="center" >
  <ul class="r ">
    <li [ngStyle]="verde" *ngFor="let posto of posti" class="s ye" id="{{posto.id}}" title="" value="{{posto.id}}" (click)="myclick($event)"  >
     {{posto.id}}
    </li>
  </ul>
</div>

组件：

export class PostiComponent {
  posti = [ARRAY OF POSTI];
  verde: object;
  constructor() {   
  }
  myclick(event) {  
    console.log(event);
    this.verde = { 'background-color': 'green' };
  }
}

Answer 1

您可以尝试此

<div  class="div1" id="sp1" align="center" >
  <ul class="r " *ngFor="let posto of posti">
    <li [ngStyle]="selectedId === posto.id" class="s ye" id="{{posto.id}}" title="" value="{{posto.id}}" (click)="myclick(posto)"  >
     {{posto.id}} 
    </li>
  </ul>
</div>

单击，您的方法应该像

public selectedId : number;    
myclick(posto){
    this.selectedId = posto.id;
    }

Answer 2

用于切换列表中的项目样式，执行此操作

在hello.component.ts

import { Component, Input } from '@angular/core';
@Component({
  selector: 'hello',
  template: `
  <div  class="div1" id="sp1" align="center" >
  <ul class="r ">
    <li [class.background]="posto.isSelected"  *ngFor="let posto of posti; let i=index" class="s ye" id="{{posto.id}}" title="" value="{{posto.id}}" (click)="myclick(posto)"  >
     {{posto.id}}
    </li>
  </ul>
</div>
`,
  styleUrls: ["./hello.component.css"]
})
export class HelloComponent  {
 posti = [{id:1, isSelected:false}, {id:2, isSelected:false}];
  constructor() {   
  }
  selectedIndex:number = -1;
  myclick(posto:any) {  
    posto.isSelected = !posto.isSelected;
  }
}

在hello.component.css

.background{ background-color:green}

https://stackblitz.com/edit/angular-f45mzv工作示例