0

我正在尝试根据单击的图像在模板中动态设置图像的类。正如过去所示，我已经准确地使用了它，它当时有效，但在这种情况下不起作用。

选择图像的模板代码：

<div class="row">
      <div class="col">
        <a (click)="setImageColor('Black')">
            <img class="img-fluid" [ngClass]="blackImgClass" src="assets/img/product black.jpg">
        </a>
        <a (click)="setImageColor('Stainless Steel')">
            <img class="img-fluid m-l-pt5" [ngClass]="stainlessImgClass" src="assets/img/product stainless steel.jpg">
        </a>
        <a (click)="setImageColor('White')">
            <img class="img-fluid m-l-pt5" [ngClass]="whiteImgClass" src="assets/img/product white.jpg">
        </a>
      </div>
    </div>

设置类的组件方法：

private setImageColor(color:string) {
switch(color) {
  case 'Black':
    this.currentProductImage = this.product.images.black;
    this.blackImgClass = 'border: 4px solid #f96302 !important'
    this.whiteImgClass = '';
    this.stainlessImgClass = '';
  break;
  case 'Stainless Steel':
    this.currentProductImage = this.product.images.stainless;
    this.blackImgClass = ''
    this.whiteImgClass = '';
    this.stainlessImgClass = 'border: 4px solid #f96302 !important';
  break;
  case 'White':
    this.currentProductImage = this.product.images.white;
    this.blackImgClass = ''
    this.whiteImgClass = 'border: 4px solid #f96302 !important';
    this.stainlessImgClass = '';
    break;
  }

  this.currentImage = this.currentProductImage[0];
  this.selectionColor = color;
  // this.setCSSClass(color);
}
4

1 回答 1

1

您不能那样使用它，而是将您的 css 放入 style.css 并尝试这个

 <div class="col">
    <a (click)="setImageColor('Black')">
        <img class="img-fluid" [ngClass]="{'blackImgClass' : isBlack}" src="assets/img/product black.jpg">
    </a>
    <a (click)="setImageColor('Stainless Steel')">
        <img class="img-fluid m-l-pt5" [ngClass]="{'stainlessImgClass' : isSteel}" src="assets/img/product stainless steel.jpg">
    </a>
    <a (click)="setImageColor('White')">
        <img class="img-fluid m-l-pt5" [ngClass]="{'whiteImgClass' : isWhite}" src="assets/img/product white.jpg">
    </a>
  </div>



  switch(color) {
  case 'Black':
   this.currentProductImage = this.product.images.black;
   this.isBlack= true
   this.isSteel= false;
   this.isWhite= false;
   break;
 case 'Stainless Steel':
   this.currentProductImage = this.product.images.stainless;
   this.isBlack= false
   this.isSteel= true;
   this.isWhite= false;
   break;
 case 'White':
   this.currentProductImage = this.product.images.white;
   this.isBlack= false
   this.isSteel= false;
   this.isWhite= true;
   break;
 }

和你的 style.css

.stainlessImgClass {
  border: 4px solid #f96302 !important;
}
.blackImgClass{
  border: 4px solid #f96302 !important;
}
.whiteImgClass{
  border: 4px solid #f96302 !important;
}
于 2018-05-06T15:37:46.063 回答