Angular 2类的属性值和绑定

Question

我是Angular 2的新手，正在制作我的第一个测试应用程序。

我测试了类的属性和绑定。

为了检查Angular中的类如何工作，我使用了许多不同的方法，每种方法都有效。

首先，在我的app.component.css上创建一个类

.setGreenBackGroundClass
{
    background-color: green;
}

我在app.component.ts上创建了一个变量

assignedVar = 'setGreenBackGroundClass';

我给班级分配了var的名称，一切正常。 类已分配。

<ul [class]="assignedVar">

要么

<ul class="{{assignedVar}}">

两者都很好。

测试的最后一种方法是将类名直接传递给URL，它也可以正常工作：

<ul class="setGreenBackGroundClass">

但是当我尝试测试绑定和双重绑定时，我的疑问就来了。 我想创建一个输入，可以在其中输入class属性的值，然后改变颜色（我知道，也许这很废话，最好使用select标记或类似的标签来完成，但是只是想要检查一下）。

在我的app.component.html视图中，我有：

<input type="text" name="miBind" [(ngModel)]="binding" />

<!--on this div I check double binding works right-->
<div>{{binding}}</div>


<ul [class]="binding">

    ....

问题出在

<ul [class]="binding">

我已经检查过了，当您在文本框中输入css类名称时，它可以工作：

输入-> setGreenBackGroundClass

这可行。 背景颜色改变。

但是当我这样做时：

输入 - > assignedVar

它不起作用，我的问题是：为什么，由于assignedVar被分配了类名，所以它不起作用？

当我键入“ assignedVar”时，从检查器获得的结果HTML是：

<ul _ngcontent-c0="" class="setGreenBackGroundClass">
    <li _ngcontent-c0="">
    <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io  /tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
    </li>
</ul>


<ul _ngcontent-c0="" class="setGreenBackGroundClass">
    <li _ngcontent-c0="">
    <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
    </li>
</ul>

<ul _ngcontent-c0="" class="setGreenBackGroundClass">
    <li _ngcontent-c0="">
    <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
  </li>
</ul>

<input _ngcontent-c0="" name="miBind" ng-reflect-name="miBind" ng-reflect-model="assignedVar" class="ng-valid ng-dirty ng-touched" type="text">

<div _ngcontent-c0="">assignedVar</div>

<ul _ngcontent-c0="" class="assignedVar">
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://angular.io/tutorial" rel="noopener" target="_blank">Tour of Heroes</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://github.com/angular/angular-cli/wiki" rel="noopener" target="_blank">CLI Documentation</a></h2>
    </li>
    <li _ngcontent-c0="">
        <h2 _ngcontent-c0=""><a _ngcontent-c0="" href="https://blog.angular.io/" rel="noopener" target="_blank">Angular blog</a></h2>
    </li>
</ul>

而且我无法弄清楚为什么输入值上的文本在这里被当作类值的简单纯文本（而不是变量名），以及当我直接在代码上写该变量名时（就像我在第一个示例）没有问题，并且知道它是CSS类名。

Answer 1

输入-> setGreenBackGroundClass

这可行。 背景颜色改变。

但是当我这样做时：

输入 - > assignedVar

它不起作用。

当您输入“ setGreenBackGroundClass”时，会发生这种情况

<ul class='setGreenBackGroundClass'>

这是您期望的工作。

当您输入“ assignedVar”时，会发生这种情况

<ul class='assignedVar'>

并且您没有名为'assignedVar'的CSS类，这就是它不起作用的原因。 您将字符串assignedVar与变量assignedVar混淆了

更新1

通过提供的stackblitz项目，我修改了代码，以使第二个<ul>绑定到getter函数。

为什么绑定到功能？

因为我想覆盖binding变量，以便每当您键入assignedVar字符串时都返回assignedVar变量。

签出此更新的stackblitz项目

希望这可以帮助。