Controllare se l'oggetto è allineato in Angolare2 - angolare

Ho una lista di prodotti nella mia app Angular2. L'utente può fare clic sul prodotto e il prodotto verrà aggiunto a una matrice di prodotti selezionati.

Ora voglio evidenziare i prodotti selezionati. Come fare questo? Come posso verificare nell'HTML se è selezionato il prodotto corrente (ngFor)? L'utente può semplicemente rimuovere il prodotto facendo nuovamente clic.

Problema risolto:

*ngIf="addedProducts.indexOf(product) > -1"

risposte:

Puoi approfittare di [NgClass] per evidenziare il prodotto selezionato come mostrato di seguito,

Demo di lavoro: https://plnkr.co/edit/eB54ue72bj80dqqza6bQ

//our root app component
import {Component, NgModule} from "@angular/core"
import {BrowserModule} from "@angular/platform-browser"

@Component({
selector: "my-app",
template: `
<style>
.active{
background:red;
}
</style>

<div>
<div *ngFor="let product of products;let i=index"
(click)="click(i)"
[ngClass]="{active:i==selectedIndex}">  //<----[ngClass]

{{i}}-{{product}}
</div>
</div>
`,
})
export class App {
constructor() {
this.name = "Angular2";
this.products=["laptop","computer","keyboard"];
}

click(i){
console.log(i);
this.selectedIndex=i;
}
}

@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}