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

在Angular2

1 个答案: