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">

但是当我尝试测试绑定和双重绑定时，我怀疑了。我想创建一个输入，我可以写出类属性的值，然后，颜色发生变化（我知道，也许这是非常废话，最好用选择标签或类似的东西，但只是想要检查一下。）

在我的 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类名称时，它可以正常工作：

输入 - ＆GT; setGreenBackGroundClass

这很有效。背景颜色会发生变化。

但是当我这样做时：

输入 - ＆GT; assignedVar

它不起作用，我的问题是：为什么，因为assignedVar已经分配了类名，它不起作用？

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

<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

输入 - ＆GT; setGreenBackGroundClass

这很有效。背景颜色会发生变化。

但是当我这样做时：

输入 - ＆GT; assignedVar

它不起作用。

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

<ul class='setGreenBackGroundClass'>

这是你期望的工作。

输入'assignedVar'时，会发生这种情况

<ul class='assignedVar'>

并且您没有名为'assignedVar'的css类，这就是它无法正常工作的原因。您将字符串assignedVar与变量assignedVar

混淆了

更新1

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

为什么我绑定到一个函数？

因为我想覆盖binding变量，只要您输入assignedVar字符串，就会返回assignedVar变量。

结帐更新stackblitz project

希望这有帮助。

Angular 2类属性值和绑定

1 个答案: