angular 中的[ngClass][ngStyle]

Posted 2021-12-01 loaderman

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>


<div [ngClass]="{‘red‘: true, ‘blue‘: false}"> 这是一个 div</div>

<div [ngClass]="{‘red‘: flag, ‘blue‘: !flag}">这是一个 div </div>

<ul>
<li *ngFor="let item of arr, let i = index"> <span [ngClass]="{‘red‘: i==0}">{{item}}</span>
</li> 
</ul>


<div [ngStyle]="{‘background-color‘:‘green‘}">你好 ngStyle</div>

<div [ngStyle]="{‘background-color‘:attr}">你好 ngStyle</div>

.red{
    color: red
}
.blue{color: blue}

import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.scss‘]
})
export class AppComponent {
  title = ‘angulardemo‘;
  inputValue=‘0‘
  attr=‘red‘
  arr= [1, 3, 4, 5, 6]
  public flag=false;
}

   效果：