[英]Angular 2 class property value and binding
I am new to Angular 2 and I am making my first test app. 我是Angular 2的新手,正在制作我的第一个测试应用程序。
I tested class property and binding. 我测试了类的属性和绑定。
To check how classes work in Angular, I used many different ways, and every one works. 为了检查Angular中的类如何工作,我使用了许多不同的方法,每种方法都有效。
First, created a class on my app.component.css 首先,在我的app.component.css上创建一个类
.setGreenBackGroundClass
{
background-color: green;
}
I created one variable on my app.component.ts 我在app.component.ts上创建了一个变量
assignedVar = 'setGreenBackGroundClass';
I assigned the var´s name to the class and everything works right; 我给班级分配了var的名称,一切正常。 class is assigned.
类已分配。
<ul [class]="assignedVar">
or 要么
<ul class="{{assignedVar}}">
Both work fine. 两者都很好。
Last way to test is passing directly the class name to the URL, and it works right too: 测试的最后一种方法是将类名直接传递给URL,它也可以正常工作:
<ul class="setGreenBackGroundClass">
But my doubt comes when I tried to test binding and double binding. 但是当我尝试测试绑定和双重绑定时,我的疑问就来了。 I wanted to create an input where I can write the value of the class property, and then, the color changes (i know, maybe it´s pretty nonsense and it would be better done with a select tag or something similar, but just wanted to check it).
我想创建一个输入,可以在其中输入class属性的值,然后改变颜色(我知道,也许这很废话,最好使用select标记或类似的标签来完成,但是只是想要检查一下)。
On my app.component.html view I have: 在我的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">
....
The problem is at 问题出在
<ul [class]="binding">
I have checked, and it works when you write on the textbox the css class name: 我已经检查过了,当您在文本框中输入css类名称时,它可以工作:
input--> setGreenBackGroundClass 输入-> setGreenBackGroundClass
This works. 这可行。 The background color changes.
背景颜色改变。
But when I do: 但是当我这样做时:
input-->assignedVar 输入 - > assignedVar
It doesn´t work, and my question is: why, since assignedVar has the class name assigned, it doesn´t work? 它不起作用,我的问题是:为什么,由于assignedVar被分配了类名,所以它不起作用?
The resulting HTML that I get from the inspector when I type "assignedVar" is: 当我键入“ 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>
And I can't figure out why the text on my input value is here taken as simple plain text (but not as the variable name) for the class value , and when I write that variable name directly on the code (like I did on first examples) there is no problem and it knows it is a CSS class name. 而且我无法弄清楚为什么输入值上的文本在这里被当作类值的简单纯文本(而不是变量名),以及当我直接在代码上写该变量名时(就像我在第一个示例)没有问题,并且知道它是CSS类名。
input--> setGreenBackGroundClass
输入-> setGreenBackGroundClass
This works.
这可行。 The background color changes.
背景颜色改变。
But when I do:
但是当我这样做时:
input-->assignedVar
输入 - > assignedVar
It doesn´t work.
它不起作用。
When you input 'setGreenBackGroundClass', this is what happens 当您输入“ setGreenBackGroundClass”时,会发生这种情况
<ul class='setGreenBackGroundClass'>
which is what you expect to work. 这是您期望的工作。
When you input 'assignedVar', this is what happens 当您输入“ assignedVar”时,会发生这种情况
<ul class='assignedVar'>
and you don't have a css class with the name 'assignedVar' that's why it is not working. 并且您没有名为'assignedVar'的CSS类,这就是它不起作用的原因。 You confused the string
assignedVar
with the variable assignedVar
您将字符串
assignedVar
与变量assignedVar
混淆了
Update 1 更新1
With a stackblitz project provided, I modified your code to make your second <ul>
to bind to a getter function. 通过提供的stackblitz项目,我修改了代码,以使第二个
<ul>
绑定到getter函数。
Why I bind to a function? 为什么绑定到功能?
Because I want to override the binding
variable to return a assignedVar
variable whenever you type a assignedVar
string. 因为我想覆盖
binding
变量,以便每当您键入assignedVar
字符串时都返回assignedVar
变量。
Checkout this updated stackblitz project 签出此更新的stackblitz项目
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.