<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; }
效果: