动态使用 Angular ngClass 不起作用

Question

我正在尝试根据单击的图像在模板中动态设置图像的 class。我已经完全按照过去的方式使用了它并且它当时有效但在这种情况下不起作用。

选择图片的模板代码：

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

要设置的组件方法class：

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 不起作用

Using Angular ngClass dynamically not working

angular-ng-class

angular