angular – 如何更改从列表中选择的项目的背景颜色?
发布时间:2020-12-17 17:42:39 所属栏目:安全 来源:网络整理
导读:import { Component } from '@angular/core';export class Hero { name: string;}const HEROES: Hero[] = [ { name: 'STWX1' },{ name: 'STWX2' },{ name: 'STWX3' },{ name: 'STWX4' }];@Component({ selector: 'my-app',template: ` div style="display: i
import { Component } from '@angular/core'; export class Hero { name: string; } const HEROES: Hero[] = [ { name: 'STWX1' },{ name: 'STWX2' },{ name: 'STWX3' },{ name: 'STWX4' } ]; @Component({ selector: 'my-app',template: ` <div style="display: inline-block; width = 200px; "> <ul class="heroes"> <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero"> <p [style.background-color]="getStyle()">{{hero.name}}</p> </li> </ul> </div>',styles: [...] }) export class AppComponent { public showStyle: boolean = false; name = 'Angular1'; testRequestId = '3224'; heroes = HEROES; selectedHero: Hero; goToDivClick() { return HEROES; } onSelect(hero: Hero): void { this.showStyle = true; this.selectedHero = hero; } getStyle() { if (this.showStyle) { return "grey"; } else { return ""; } } } 我想更改从列表中选择的项目的背景.根据我上面的代码,我有一个列表,我试图调用方法getStyle()将所选项目的背景颜色更改为黄色.截至目前,它改变了所有列表项的颜色.我没有得到如何仅在我的示例中为selectedhero专门更改颜色.你能告诉我哪里出错了吗? 解决方法<p [style.background-color]="getStyle(hero)"> getStyle(hero) { if (hero === this.selectedHero) { return "grey"; } else { return ""; } } 要么 <p [style.background-color]="hero===selectedHero ? 'grey' : ''"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |