¿Cómo cambiar el color de fondo del elemento seleccionado de la lista?

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

Quiero cambiar el fondo del elemento seleccionado de una lista. Según mi código anterior, tengo una lista y estoy tratando de llamar a un método getStyle () para cambiar el color de fondo del elemento seleccionado a Amarillo. A partir de ahora, su color cambia para todos los elementos de la lista. No entiendo cómo cambiar el color específicamente solo para el héroe seleccionado en mi ejemplo. ¿Me puede hacer saber dónde me estoy equivocando?