Comment changer la couleur d'arrière-plan de l'élément sélectionné dans la liste?

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

Je souhaite modifier l'arrière-plan de l'élément sélectionné dans une liste. Selon mon code ci-dessus, j'ai une liste et j'essaie d'appeler une méthode getStyle () pour changer la couleur d'arrière-plan de l'élément sélectionné en jaune. À partir de maintenant, sa couleur changeante pour tous les éléments de la liste. Je ne comprends pas comment modifier spécifiquement la couleur uniquement pour le héros sélectionné dans mon exemple. Pouvez-vous s'il vous plaît laissez-moi savoir où je vais mal.

Günter Zöchbauer 
<p [style.background-color]="getStyle(hero)">


    getStyle(hero) {
        if (hero === this.selectedHero) {
            return "grey";
        } else {
            return "";
        }
    }

ou

<p [style.background-color]="hero===selectedHero ? 'grey' : ''">

Articles connexes