Question

我是角度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

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

2 个答案: