ng-class 不工作答案

【问题标题】：ng-class not working onng-class 不工作
【发布时间】：2017-03-18 15:10:19
【问题描述】：

快速提问。我第一次尝试处理 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;
  }
}

在我的 ts 我有：

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”的文本字段，并且在我的日志中我有：

[{"selected":true,"type":"Facebook"},{"selected":false,"type":"Twitter"},{"selected":false,"type":"Instagram" },{"selected":false,"type":"LinkedIn"},{"selected":false,"type":"Github"}]

推特也是一样 [{"selected":false,"type":"Facebook"},{"selected":true,"type":"Twitter"},{"selected":false,"type":"Instagram"},{ "selected":false,"type":"LinkedIn"},{"selected":false,"type":"Github"}]

当我将“选定”类直接应用到该类时，它正在工作，但使用 ng 类却不是。我做错了什么？

我在这里关注了ng-class not being applied 的主题，但在课堂上使用 '' 并没有为我工作

【问题讨论】：

请为您使用的 Angular 版本使用正确的标签。 angularjs 用于 AngularJS 1.x； angular2 用于 Angular 2。

标签： javascript angularjs typescript ionic2

【解决方案1】：

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

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

有关文档/示例，请参见此处：https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

据此，您可能还需要在 CSS 类名周围加上引号，尽管我不确定它们是否真的需要。

【讨论】：