[style.width]="calc(50vw - {{m}}px)"这样写在angular中报错,没有style_width这样的写法
时间: 2023-05-25 15:06:49 浏览: 113
在Angular中,可以使用以下方式设置元素的宽度:
1. 使用属性绑定语法("[]")设置元素的属性,如:`[style.width]="calc(50vw - m + 'px')"`,其中`m`是组件中定义的变量,不需要用双大括号包裹。
2. 使用内联样式(style)设置元素的属性,如:`<div [style.width]="'calc(50vw - ' + m + 'px)'"></div>"`,其中内联样式的属性名称需要用双引号包裹。
注意,如果要在属性绑定中使用表达式,需要把表达式放在单引号或双引号中,并使用加号进行连接。
相关问题
翻译一下下面这段代码option.style.position = "relative"; option.style.paddingRight = "12px"; const dot = document.createElement("span"); dot.style.display = "block"; dot.style.position = "absolute"; dot.style.content = "' '"; dot.style.width = "6px"; dot.style.height = "6px"; dot.style.borderRadius = "50%"; dot.style.backgroundColor = "blue"; dot.style.left = "calc(100% - 10px)"; dot.style.top = "50%"; dot.style.transform = "translateY(-50%)"; option.appendChild(dot);
这段代码的功能是在指定单元格元素中添加一个蓝色的圆点。以下是代码的翻译:
```
option.style.position = "relative";
// 设置单元格元素的 position 属性为 relative
option.style.paddingRight = "12px";
// 设置单元格元素的 paddingRight 属性为 12px,防止圆点被遮挡
const dot = document.createElement("span");
// 创建一个 span 元素用于显示圆点
dot.style.display = "block";
dot.style.position = "absolute";
dot.style.content = "' '";
dot.style.width = "6px";
dot.style.height = "6px";
dot.style.borderRadius = "50%";
dot.style.backgroundColor = "blue";
dot.style.left = "calc(100% - 10px)";
dot.style.top = "50%";
dot.style.transform = "translateY(-50%)";
// 设置 span 元素的样式
option.appendChild(dot);
// 将 span 元素添加到单元格元素中
```
为什么这句代码在angular中会报错[style.width]="calc(50vw-{{m}}px)"
这句代码在Angular中会报错是因为在模板语法中不能直接使用插值表达式{{}}。应该使用属性绑定语法 [] 来绑定样式。正确的写法应该是 [style.width]="`calc(50vw - ${m}px)`"。这样会将 `calc(50vw - ${m}px)` 字符串作为样式的值绑定到 style.width 属性上。