带有 ngClass 的 Angular 2 枚举答案

【问题标题】：Angular 2 enum with ngClass带有 ngClass 的 Angular 2 枚举
【发布时间】：2017-09-20 14:23:40
【问题描述】：

您好，我正在尝试使用带枚举的条件类。我之前在ngSwitchCase 中使用过html 中的枚举，并且遇到了与我现在遇到的相同的错误。当我添加一个名为该枚举的属性并将其分配给该枚举时，它将起作用。

工作示例：

                    <ng-container *ngFor="let column of columns" [ngSwitch]="column.dataType">
                    <td *ngSwitchCase="DataType.Text">{{getPropertyValue(row,column.propertyName)}}</td>
                    <td *ngSwitchCase="DataType.Date">date</td>
                    <td *ngSwitchCase="DataType.Number">number</td>
                    <td *ngSwitchDefault>default</td>
                </ng-container>

private DataType = DataType;

不工作：

            <span *ngClass="(column.sortType === SortType.Ascending)? 'privilege-grid-sortasc': (column.sortType === SortType.Descending)?'privilege-grid-sortdesc':'privilege-grid-sortnone'"></span>

我也试过[ngClass] ="{'class-name': var === enum,...}"

   private SortType = SortType;

错误信息：

无法读取未定义的属性“升序”

【问题讨论】：

标签： html angular enums

【解决方案1】：

我在这里找到了一个非常好的教程：https://coryrylan.com/blog/angular-tips-template-binding-with-static-types

总而言之，语法是 [ngClass] ="{'class-name': var === enum}":

@Component({
  selector: 'app-message',
  template: `
    <div class="message" [ngClass]="{
      'message--error': messageTypes.Error === type,
      'message--success': messageTypes.Success === type,
      'message--warning': messageTypes.Warning === type
    }">
      <ng-content></ng-content>
    </div>
  `
})
export class MessageComponent implements OnInit {
  @Input() type = MessageTypes.Default;
  private messageTypes = MessageTypes; //very important to declare here

  constructor() { }

  ngOnInit() { }
}

【讨论】：

【解决方案2】：

我认为您的问题一定出在其他地方。我使用带有枚举的 [ngClass] 绑定重新创建了您的场景，它对我来说很好：

[ngClass] ="{'class-name': var === enum,...}"

您的模板在第二种情况下是否位于单独的 .html 文件中，而不是在第一种情况下？我遇到了模板文件无法读取组件文件中的私有变量的问题。

【讨论】：

它在一个单独的 html 文件中。
问题在于它是私有的。