Question

快速提问。我是第一次尝试处理ng-class而且我想知道我做错了什么。

所以在我的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>

在我的CSS中我有：

page-social {

  .big{
    font-size:300%;
    display: inline-block;
    margin:2%;
  }

  .selected{
    font-size:300%;
    color:#9991ff;
  }
}

在我的案例中，我有：

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));
  }

当我点击Facebook时，我可以看到文字字段出现在“Entrez votre Facebook”中，在我的日志中我有：

[{ “选择”：真， “类型”： “脸谱”}，{ “选择”：假， “类型”： “推”}，{ “选择”：假， “类型”： “Instagram的” }，{ “选择”：假， “类型”： “LinkedIn”}，{ “选择”：假， “类型”： “Github的”}]

Twitter也是如此 [{ “选择”：假， “类型”： “脸谱”}，{ “选择”：真， “类型”： “推”}，{ “选择”：假， “类型”： “Instagram的”}，{ “选择”：假， “类型”： “LinkedIn”}，{ “选择”：假， “类型”： “Github的”}]

当我将类'selected'直接应用于该类时，它正在工作但是使用ng类则不然。我做错了什么？

我按照ng-class not being applied的主题进行了操作，但没有为我在课堂上的''

工作

Answer 1

假设您使用的是最近的Angular2版本（提及typescript和ionic2），您的绑定需要[ngClass]=...，而不是ng-class= ......

所以你有错误的属性名称以及绑定的缺失括号。

请参阅此处了解文档/示例：https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

根据你的说法，你可能还需要CSS类名称的引号，虽然我不确定它们是否真的是必需的。

ng-class没有工作

1 个答案: