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

但是当我尝试测试绑定和双重绑定时，我产生了疑问。我想创建一个输入，我可以在其中写入类属性的值，然后颜色会发生变化（我知道，也许这很废话，最好使用选择标签或类似的东西来完成，但只是想要检查它）。

在我的 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 project

希望这会有所帮助。