赞
踩
在Angular中,ngStyle是一个内置指令,用于动态设置元素的样式。它允许你基于组件中的属性或表达式来动态计算和应用CSS样式。
以下是有关ngStyle的一些要点:
例如,假设你有一个组件属性backgroundColor,你可以像这样使用ngStyle:
<div [ngStyle]="{ 'background-color': backgroundColor }">动态背景颜色</div>
在上述示例中,backgroundColor属性的值将被动态地应用为div元素的背景颜色。
例如,假设你有一个组件属性isActive,你可以通过表达式来决定是否应用特定的样式:
<div [ngStyle]="{ 'background-color': isActive ? 'green' : 'red' }">根据状态应用样式</div>
在上述示例中,如果isActive为真,将应用绿色背景颜色;否则,将应用红色背景颜色。
例如:
<div [ngStyle]="{ 'font-size.px': fontSize, 'color': fontColor }">根据属性设置不同样式</div>
在上述示例中,fontSize和fontColor是组件属性,分别控制字体大小和字体颜色。
ngStyle指令使你能够在Angular中轻松地动态设置元素的样式。你可以根据组件属性或表达式来计算和应用样式,实现灵活的样式控制。
遍历后台数据,根据不同的状态【已执行,执行中,未执行】显示不同的颜色背景
该功能用到angular的ngClass
用法
[ngClass]="{'动态添加的属性名':判断条件,多个条件用逗号分隔}" >
如:
[ngClass]="{' layui-btn-danger':item.status==='未执行','layui-btn-warm':item.status==='执行中',' layui-btn-normal ':item.status==='已执行'}" >
代码
<div style="padding: 10px" overflow="hidden" >
<div *ngIf="makingPlanData!=null">
<div *ngFor="let item of makingPlanData;let index = index" style="float: left">
<div style="float: left">
<div>{{item.name}}</div>
<div>{{item.date}}</div>
</div>
<div style="float: right" class="layui-btn layui-btn-radius oval" [ngClass]="{' layui-btn-danger':item.status==='未执行','layui-btn-warm':item.status==='执行中',' layui-btn-normal ':item.status==='已执行'}" ><div class="stutus">{{item.status}}</div></div>
<hr style="width: 280px;">
</div>
</div>
类绑定:
类绑定允许你根据条件为元素添加或移除CSS类。你可以使用方括号语法将一个属性与一个布尔表达式绑定在一起。如果表达式的值为真,则添加对应的CSS类;如果值为假,则移除对应的CSS类。
例如,假设你有一个属性isActive,当它为真时,你想给一个元素添加一个名为active的CSS类,你可以这样写:
<div [class.active]="isActive">Some content</div>
在上面的例子中,当isActive为真时,会为div元素添加active类。
例:
选中后变颜色
<ul> <li *ngFor="let menu of menus;let i = index"> <!-- 使用双花括号表达式 --> <a href="#" [class.active]="i === selectedIndex" (click)="selectedIndex = i" >{{ menu.title }}</a> </li> </ul> .active{ color:red; } selectedIndex = -1;
在Angular中,ngIf是一个内置指令,用于根据条件在模板中渲染或销毁一个元素。ngIf else结合了ngIf指令和ng-template语法,可以让我们在条件不满足时显示备用内容。
以下是有关ngIf else的一些要点:
例如,假设你有一个布尔变量showElement,你可以像这样使用ngIf:
<div *ngIf="showElement">显示该元素</div>
在上面的例子中,如果showElement为true,则div元素会被渲染到DOM中。
例如,假设你有一个备用内容,你可以这样使用ngIf else:
<div *ngIf="showElement; else alternateContent">显示该元素</div>
<ng-template #alternateContent>备用内容</ng-template>
在上面的例子中,如果showElement为true,则
例如:
<div *ngIf="condition; then firstTemplate else secondTemplate"></div>
<ng-template #firstTemplate>第一个备选内容</ng-template>
<ng-template #secondTemplate>第二个备选内容</ng-template>
在上面的例子中,如果condition为true,则firstTemplate中的内容会被渲染;否则,secondTemplate中的内容会被渲染。
使用ngIf else能够根据条件灵活地在模板中显示不同的内容。它在处理条件渲染时非常实用。
例:
选中后变色
<ul>
<li *ngFor="let menu of menus;let i = index">
<!-- 使用双花括号表达式 -->
<a href="#"
[class.active]="i === selectedIndex"
(click)="selectedIndex = i"
>{{ menu.title }}</a>
<span class="indicator" *ngIf="i === selectedIndex"></span>
</li>
</ul>
ul{ padding: 0; margin: 0; padding: 0; display: flex; /* 将屏幕剩余空间平均分布于各子元素之间 */ justify-content: space-between; } ul li { /* 去掉列表的 bullet */ /*display: inline-block;*/ display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 10px; /* 内容不折行显示 */ white-space: nowrap; } a{ text-decoration: none; } /* 不显示滚动条,只对基于 Webkit 内核的浏览器有效 */ ::-webkit-scrollbar { display: none; } .active{ color:red; } .indicator{ background-color: brown; height: 2px; width: 2rem; margin-top: 2px; }
图例
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。