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項目

希望這可以幫助。