[英]ng-class not working on
Quick question. 快速提问。 I am trying to deal with ng-class for the first time and I am wondering what I am doing wrong.
我是第一次尝试处理ng-class,我想知道自己做错了什么。
So in my HTML I have: 所以在我的HTML中,我有:
<ion-icon name="logo-facebook" class="big" ng-class="{selected: facebook.selected}" (tap)="addSocial('Facebook')" ></ion-icon>
<ion-icon name="logo-twitter" class="big" ng-class="{selected: twitter.selected}" (tap)="addSocial('Twitter')"></ion-icon>
In my css I have: 在我的CSS中,我有:
page-social {
.big{
font-size:300%;
display: inline-block;
margin:2%;
}
.selected{
font-size:300%;
color:#9991ff;
}
}
In my ts I have: 我有:
facebook = {
"selected" : false,
"type" : "Facebook"
}
twitter = {
"selected" : false,
"type" : "Twitter"
}
...
...
addSocial(type){
// reinit all to selected false
for(var i in this.all){
this.all[i].selected = false;
}
switch(type) {
case "Facebook":
this.facebook.selected = true;
break;
case "Twitter":
this.twitter.selected = true;
break;
case "Instagram":
this.insta.selected = true;
break;
case "LinkedIn":
this.linkedin.selected = true;
break;
case "Github":
this.github.selected = true;
break;
}
this.atLeastOneSelected = true;
this.currentSocial = type;
console.log(JSON.stringify(this.all));
}
When I click on facebook I can see the text field appearing with "Entrez votre Facebook" and in my log I have: 当我单击facebook时,我可以看到文本字段显示为“ Entrez votre Facebook”,并且在我的日志中,我有:
[{"selected":true,"type":"Facebook"},{"selected":false,"type":"Twitter"},{"selected":false,"type":"Instagram"},{"selected":false,"type":"LinkedIn"},{"selected":false,"type":"Github"}] [{“ selected”:true,“ type”:“ Facebook”},{“ selected”:false,“ type”:“ Twitter”},{“ selected”:false,“ type”:“ Instagram”},{ “ selected”:false,“ type”:“ LinkedIn”},{“ selected”:false,“ type”:“ Github”}]
Same thing for twitter [{"selected":false,"type":"Facebook"},{"selected":true,"type":"Twitter"},{"selected":false,"type":"Instagram"},{"selected":false,"type":"LinkedIn"},{"selected":false,"type":"Github"}] 对于Twitter [{“ selected”:false,“ type”:“ Facebook”},{“ selected”:true,“ type”:“ Twitter”},{“ selected”:false,“ type”:“ Instagram “},{” selected“:false,” type“:” LinkedIn“},{” selected“:false,” type“:” Github“}]
When I apply the class 'selected' to the class directly it is working but with ng class it is not. 当我直接将“选择的”类应用于该类时,它可以工作,但是对于ng类,则不能。 What I am doing wrong?
我做错了什么?
I followed the topic here ng-class not being applied but not working for me with the '' in the class 我在这里关注的主题是ng-class未被应用,但对于班级中的''却不适合我
Assuming you are using a recent Angular2 version (you mention typescript and ionic2) your binding needs to be [ngClass]=...
, not ng-class=
... 假设您使用的是最新的Angular2版本(提到了typescript和ionic2),则您的绑定需要为
[ngClass]=...
,而不是ng-class=
...
So you have the wrong property name as well as the missing brackets for the binding. 因此,您具有错误的属性名称以及绑定的缺少括号。
See here for documentation/examples: https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html 请参阅此处以获取文档/示例: https : //angular.io/docs/ts/latest/api/common/index/NgClass-directive.html
According to that you might also need quotes around the CSS class names, although I'm not sure whether they are really required. 据此,您可能还需要在CSS类名称周围加上引号,尽管我不确定是否确实需要它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.