使用插值设置 CSS 吸引值

Question

使用角度 2，如何使用插值来设置 css attrs 值。

我正在使用这种语法，但它无法正常工作。

import { Component } from '@angular/core';
@Component({
    selector: 'app',
    template:<div [ngStyle]="{'width': {{width}} +'%'}">})
export class AppComponent {
    private width: number = 12;  
    constructor (){}}

Answer 1

对于初学者来说，当你做内联模板时，你需要使用键盘上 1 之前的小勾号，所以它看起来像这样

template: `<div>blah</div>`

否则浏览器不会读取它。

接下来，您将缺少结束div 标记。您当前拥有

template: <div>

当需要时

template: `<div></div>`

然后就ngStyle的语法而言. 看起来您正在尝试绑定绑定内部的属性，这是额外的不必要的工作，您只需要传递您希望它从中抽取值的键的名称。 看到您使用了实际 css 属性的名称，您可能希望将其更改为 width1 或其他内容，以确保它不会混淆浏览器。 如果你没有正确的语法，但width属性在浏览器中"正确读取"，它可以显示一些非常时髦的东西，而不会抛出任何错误，这使得当你刚开始时更难检测到。 尝试进行这些更改，看看它们是否有效。

Answer 2

首先，确保您的模板用引号或'，

其次，您正在寻找的是没有大括号的<div [ngStyle]="{'width': width +'%'}">