Question

我正在尝试根据点击的图像动态设置我的模板中的图像类。我已经准确地使用了这个，如过去所显示的那样，但是在这种情况下不起作用。

选择图片的模板代码：

<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);
}

Answer 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;
}

使用Angular ngClass动态不起作用

1 个答案: