檢查對象是否在Angular2中的陣列中

Question

我有一個Angular2應用程序中的產品列表。用戶可以點擊產品，產品將被添加到selectedProducts數組中。

現在我想突出顯示所選產品。這個怎麼做？如果選擇了當前產品（ngFor），我該如何檢查HTML？用戶可以通過再次單擊刪除產品。

問題解決了：

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

Answer 1

你可以採取的[ngClass]優勢突出所選產品如下圖所示，

工作演示：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 {}