Использование Angular ngClass динамически не работает - PullRequest
Новая
       15

Использование Angular ngClass динамически не работает

0 голосов
/ 06 мая 2018

Я пытаюсь динамически установить класс моего изображения в моем шаблоне в зависимости от того, какое изображение нажимается. Я использовал это точно так, как показано в прошлом, и это сработало тогда, но в этом случае не работает.

Код шаблона для выбора изображения: 

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

1 Ответ

0 голосов
/ 06 мая 2018

Вы не можете использовать его таким образом, вместо этого поместите свой 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;
}
...