개체가 각도 2로 배열되어 있는지 확인하십시오.

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 {}