Question

我有脚本推送（和拼接）数据到数组和从数组。

 <button
  *ngFor="#color of colors"
   [class.selected]="???????????" (click)="onPress(color)">
       {{color.name}}
 </button>

app.ts

onPress(color: Color) {
 this.selectedColors = color;
  if (this.hasColor(this.colorsArray,this.selectedColors.id)) {
    this.colorsArray.splice( this.colorsArray.indexOf(this.selectedColors.id),1);
  }
  else {
    this.colorsArray.push(this.selectedColors.id);
         }   
  }

如何通过点击更改所有按下按钮的课程并将其更改回来？不切换（like here）我应该使用ngClass还是类似[class.selected] ===

的东西

Plunker

Answer 1

我认为这就是你想要的

@Component({
  selector: 'my-app',
  providers: [],
 @View({
 template : `
 <div flex="100" layout="column" layout-xs="column" layout-sm="column">
  <button md-button  md-raised-button class="color"
      *ngFor="#color of colors"
      [class.selected]="isColorSelected(color)"
      (click)="onPress(color)">
      {{color.name}}
  </button>
  {{colorsArray}}
  </div>
  <div>selected: {{selectedColors | json}}</div>
  ` ,
  directives: []
})
export class App {

  public colors = COLORS;
          selectedColors : Color;
          colorsArray = [];
  selectedColors:Color[] = [];        

  onPress(color: Color) {
    var index = this.selectedColors.indexOf(color.id);
    console.log(index);
    if(index < 0) {
      console.log('add');
      if(index === -1) {
        this.selectedColors.push(color.id);
      }
    } else {
      console.log('remove');
      this.selectedColors.splice(index, 1);
    }
  }   

  isColorSelected(color) {
    return this.selectedColors.indexOf(color.id) != -1;
  }
 }
}

我也改变了CSS

button.color.selected {
  background : #fff;
}

Plunker http://plnkr.co/edit/bhHbSd5ReCxtxRNI9ogx?p=preview

增加选择性，否则不会应用样式，因为button.color的选择性高于.selected的选择性。

如何通过点击更改按钮类？

1 个答案: