ngClass用于多个CSS样式条件

Question

HTML

    <span [ngClass]="{
                       'fas fa-star' : isSelected,
                       'far fa-star' : !isSelected
                     }"
          (click)="OnClick()">
    </span>

打字稿

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-one-component',
  templateUrl: './one-component.component.html',
  styleUrls: ['./one-component.component.css']
})
export class OneComponentComponent implements OnInit {

@Input() isSelected : boolean;
@Output() change = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  OnClick(){
    this.isSelected= !this.isSelected;
    this.change.emit(this.isSelected);
  }

}

在单击图标时，部分类的加载方式很像fas或空间很远，没有添加任何类。

Answer 1

如果在两种情况下都拥有“ fa-star”课程，则可以执行以下操作：

<span [ngClass]=“{‘fa-star’:true, ‘fas’: isSelected, ‘far’: !isSelected}”></span>

Answer 2

HTML

<span class="fa-star" [ngClass]="{
                   'fas' : isSelected,
                   'far' : !isSelected
                 }"
      (click)="OnClick()">
</span>

或

<span class="" [ngClass]="{
                   'fas' : isSelected,
                   'far' : !isSelected,
                   'fa-star' : true
                 }"
      (click)="OnClick()">
</span>

类绑定可以如上所述完成。