Question

我在玩耍以了解单向绑定和插值之间的区别，发现对于ngClass来说，两者似乎是等效的，但是对于ngStyle来说，我无法理解使用插值功能（仅绑定有效）。请参见以下StackBlitz：https://angular-a6cvfb.stackblitz.io的实时示例。

以下注释中的ngStyle语法'都不适合我。我错过了什么？非常感谢！

{注意：注释掉的所有内容都是那样，否则会破坏代码}。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>
            <button style="background-color: yellow">Button</button> <br/><br/>
            -- ANGULAR DIRECTIVES -- <br/>
            <label>Foo:</label>
            <input value="Foo" [ngClass]="styleClass"/>

            <label>Bar:</label>
            <input value="Bar" [ngStyle]="styleObj" />

            <label>Foo:</label>
            <input value="Foo" ngClass="{{styleClass}}"/> <br/>

            <!--label>Bar:</label> 
            <input value="Bar" ngStyle="{{styleObj}}" />

            <label>Bar:</label> 
            <input value="Bar" ngStyle="{{styleStr}}" />

            <label>Bar:</label> 
            <input value="Bar" ngStyle="{'visibility': 'hidden'}" /--><br/>
<br/><br/>
            -- WITHOUT ANGULAR DIRECTIVES -- <br/>
            <label>Bazz:</label>
            <input value="Bazz" class="{{styleClass}}" />

            <!--label>Bazz:</label>
            <input value="Bazz" style="{{styleStr}}" />

            <label>Bazz:</label>
            <input value="Bazz" style="{{styleObj}}" /-->            

            <label>Buzz:</label>
            <input value="Buzz" style="visibility: hidden" />
            `,
  styles: [`h1 { font-family: Lato; }
            .hide{visibility:hidden}`]
})
export class HelloComponent  {
  @Input() name: string;
  styleClass: string = "hide";
  styleObj={'visibility': 'hidden', 'width': '60%'};
  styleStr="'visibility': 'hidden'";

}

Answer 1

属性绑定和字符串插值都适用于 ngClass/[ngClass]，因为 ngClass 接受一个字符串，并且

插值将任何不是字符串的内容转换为字符串。

字符串插值对 ngStyle 不起作用，因为它接受一个对象。您必须对 ngStyle 使用属性绑定。

在ngStyle与ngClass中，为什么ngStyle不能在没有方括号的情况下工作，但是ngClass可以吗？

1 个答案: