On/Off 如何在 angular 中点亮？

Question

我有一个用户列表，我需要为 angular 中的每个用户创建徽章圆圈（green/red），对于活跃用户，有圆圈绿灯，对于不活跃用户，有圆圈红灯..谢谢

Answer 1

使用很棒的字体。然后使用 angular 指令设置类。类似于：

  <i class="fas fa-power-off" [class.on]=”isOn” (click)=“onClick()></i>

Css

 i{color:red;}   i.on{color:green}

打字稿

  on=false;
  onClick():void{
       this.on=!this.on;
   }

Answer 2

以下是动态生成状态的方法：

<li *ngFor="let user of users">
        <span class="dot" [ngClass]="{'active': (user.status==='on'), 'inactive':(user.status === 'off')}"></span>
        {{user.name}}
      </li>

这是工作示例：Stackblitz Example

On/Off 如何在 angular 中点亮？

how do On/Off light in angular?

frontend

backend

light

angular