如何正确使用函数[ngStyle] （赞，实用）

最新推荐文章于 2024-11-27 12:08:42 发布
转载 最新推荐文章于 2024-11-27 12:08:42 发布 · 554 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://cloud.tencent.com/developer/ask/131396

本文介绍了一种在Angular中使用ngStyle指令动态设置背景图片的方法。通过从数组中获取图片URL，并将其应用到样式对象中，可以实现背景图片的动态显示。

原文出处：https://cloud.tencent.com/developer/ask/131396

html

<div [ngStyle]="getImageEvent(i)">

JS

getImageEvent(index: number): object {
    const img = this.events[index].images[0] || {}; // is array defined?
    const imgSrc = img.url || ''; 
    return {'background-image': 'url(' + imgSrc + ')'};
}

 

使用 Python 函数callable和isinstance的意义
gongdiwudu的专栏
09-27 3460
在这篇博客中，我们将探讨两个python函数：1callable中的函数及其有趣的应用程序。该callable函数用于检查对象是否可调用，这意味着它可以作为函数调用。2isinstance这个内置函数允许我们比较两种不同的数据类型并确定它们是否相同。
一文读懂C++中的Lambda函数：简洁、高效、灵活
Lion_Long的博客
11-16 1万+
一、匿名函数的基本语法； 二、捕获列表： 2.1、值捕获， 2.2、引用捕获， 2.3、隐式捕获， 2.4、空捕获列表， 2.5、表达式捕获， 2.6、泛型 Lambda， 2.7、可变lambda， 2.8、混合捕获， 2.10、Lambda捕获列表总结。 lambda表达式的目的是把函数写的更加内聚；只需要在内部使用，就没必要写到外部，干扰其他函数，同时使代码更简洁。 如果捕获列表为[&]，则表示所有的外部变量都按引用传递给lambda使用。
[Angular] 笔记 6：ngStyle
学习笔记
12-22 2712
后缀（如 ‘top.px’、‘font-style.em’），值为待求值的表达式，得到的非空值以给定的单位表示，并赋给指定的样式属性。指令接受一个对象作为输入，其中键是 CSS 样式属性，值是对应的样式值。这使得你可以根据组件中的变量值来动态地添加或移除样式。是一个内置的指令，用于动态设置 HTML 元素的样式。它允许你根据组件中的条件或变量值动态地修改元素的样式。设置一个或多个样式属性，用以冒号分隔的键值对指定。是组件中的变量，它们根据不同的值来动态地修改文本的颜色、字体大小和字体样式。
巧用angular指令系统——样式绑定（ngClass和 ngStyle的使用详解）
weixin_44801414的博客
06-22 1753
前端开发中经常会遇到这样一种情况：不同的页面会共用同一段代码，同时我们要根据页面的具体信息或者某种操作（例如点击某个按钮）去决定是否展示这段代码或使页面样式做出一定的改变，这时就用到我们angular中的样式绑定！例如：网站的两个页面需要用到同样一段代码，重复写两遍不符合dry（don’t repeat yourself）原则，效率也很低，所以公司里angular的前端开发项目中通常不会这么做。如果有一天领导告诉你：zzz，麻烦你改下代码，这句提示语我在这个页面想要呈现这个效果，在另一个页面要那个效果，这时
Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）
天行健 君子以自强不息，地势坤 君子以厚德载物。
03-15 3788
图片 本地图片： 我们在assets目录下面新建images文件夹并且往里面放入图片。 <h1>引入图片</h1> <img src="assets/images/虎牙.png" alt="虎牙"> 网络图片（绑定图片） public picUrl: string = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'; <h1>引入图片</h1
巧用ngStyle动态计算图表的高度（赞，实用）
chelen_jak的专栏
11-07 645
参考资料： 1、如何正确使用函数[ngStyle] 先上图： html <div class="chart-box chart-bar" [ngClass]="{'hidden': !showChartBar1}"> <div class="title-bar"> <span class="remark">{{chartBarTit...
Angular学习1-内置属性型指令之NgStyle、NgClass、NgModel基本使用
青颜的天空的博客
07-17 3661
Angular 属性型指令会监听并修改其它 HTML 元素和组件的行为、Attribute 和 Property。 它们通常被应用在元素上，就好像它们是 HTML 属性一样，因此得名属性型指令。
高效查看DLL导出函数的实用工具
首先，“查看dll中导出函数的工具”这一标题明确指出该资源是一个用于分析DLL文件结构的实用程序。其核心功能在于解析PE（Portable Executable）格式文件中的导出表（Export Table），从而列出该DLL对外公开的所有...
实验5-10 使用函数求余弦函数的近似值 （15 分）
FairyPrimordial的博客
09-26 6661
浙大版《C语言程序设计实验与习题指导（第3版）》题目集 实验5-10 使用函数求余弦函数的近似值 （15 分） 本题要求实现一个函数，用下列公式求cos(x)cos(x)cos(x)的近似值，精确到最后一项的绝对值小于eee：cos(x)=x00!−x22!+x44!−x66!+⋯cos(x) = \frac{x^0}{0!} - \frac{x^2}{2!} + \frac{x^4}{4!} -...
习题6-4 使用函数输出指定范围内的Fibonacci数
nazonomaster的博客
03-10 3904
习题6-4 使用函数输出指定范围内的Fibonacci数
Angular6中[ngClass]、[ngStyle]的基本使用
weixin_30883271的博客
05-15 721
1、ngStyle 基本用法 <div [ngStyle]="{'background-color':'green'}"></<div> 判断添加 <div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div> ...
:style 使用写在计算属性 computed 里面的函数并传递参数
xjh的博客
11-30 2836
<div v-for="curr in item.child" class="info_detailed" :style="childInfoWidth(curr.ratio)" > </div> computed: { childInfoWidth(ratio) { let difference = (100 - this.vm.part6.memberRatio[0].ratio * 100) / 2; return .
【angular-基础教程】属性指令NgStyle
qq_41243979的博客
11-23 733
博客首页导航 实践1 app.component.html <img [ngStyle]="{width: '30px', height: '40px'}"> app.component.ts @Input() xAxis: Array<string> = ['1月', '2月', '3月', '4月', '5月'] 实践2 根据不同值设定不同样式 <button nz-button nzType="primary" [ngStyle]="{'backg
Angular之ngStyle和ngClass
最新发布
hua_chi的专栏
11-27 676
ngStyle是元素的标签样式属性，动态设置元素的内联样式，接收一个对象“{ }”，对象中的键为样式属性名，值为样式值，该值可使用变量值，也可使用表达式。ngStyle和ngClass都是angular中经常使用的动态控制元素样式或样式类的指令，用的比较多，但也容易记混，老是要先查文档，记录一下。ngClass也是标签的样式属性，但它是用来动态增加或移除css样式类，因此，其所接收的可以是对象，也可以是字符串或字符串数组。screenWidth为变量， 动态设置width的样式值；
[ngClass]、[ngStyle]
web
09-24 846
前提 最近写angular2项目，有这么个需求 后台返回status为0、1、2，分别代表正常、有隐患、未巡查。我要根据status，来在前台显示不同的样式与结果，大概这样 思路 1、整理数据，形成数组，以便于在前台渲染 2、用动态class，以便于添加不同的背景 3、转换，根据0、1、2，显示 正常、有隐患、未巡查 的结果 实现 // item是循环数组的每一项 <p >巡查结果： <span [class]='class(item.checkedStatusId)'>
Angular4中[ngClass]、[ngStyle]的基本使用
热门推荐
笑尽英雄
06-05 7万+
Angular
angular：[ngclass]、[ngstyle]用法以及和class、[class]、style、[style]对比
jeason_chan_zju的博客
12-04 1694
1背景 看前人写的代码，有一段这样设置class的模板（html）代码：[ngStyle]=“setStyles()”，其中setStyle()函数的返回值是： { "box-shadow": "10px 10px 5px gainsboro" } 其实，也可以这样写： <div [ngStyle]="{'box-shadow':isChoosen?'green':'white'}"&g...
Angular中[ngStyle]和[ngClass]的使用方式
leaf_c的博客
03-02 779
[ngStyle] 直接使用 选择表达式等判断方式使用 <!-- 设置颜色为红色 --> <div [ngStyle]="{'color': 'red'}">Angular</div> <!-- 如果1==2为真，设置颜色为红色，否则绿色 --> <div [ngStyle]="{'color': 1==2 ? 'red':'green'}">Angular</div> <!-- 如果1==1为真，设置颜色为红
angular [ngStyle]和[ngClass]的用法 （举例）
F_ayyyy的博客
10-29 830
举个栗子： 利用数学的随机数函数，来获取在线/离线状态，分别给这两种状态添加样式 ts文件 export class MyownComponent{ state:string="离线"; contructor(){ this.state=Math.random()>0.5? "离线":"在线" } Getstate(){ return state;//返回上面得到的状态 不能在上面的函数中写return 会报错 } getStyle(){ //这个函数用来设置不同状态下的样式
实用的ASCII码与字符转换函数教程
一个好用的函数通常需要良好的接口设计，使得用户能够直观地理解如何使用函数，并能快速地将函数应用到各种场景中。 - 对于开发者而言，一个简单方便的函数应当具备清晰的代码结构，良好的注释以及文档说明，使得...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值