Angular 2枚举与ngClass

Question

你好，我正在尝试使用带有枚举的条件类。我之前在HTML中使用了ngSwitchCase和相同的错误提示。当我添加一个名为该枚举的属性并将其分配给该枚举时，它会起作用。

有效示例：

                    <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>

ts

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,...}"

ts

   private SortType = SortType;

错误信息：

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

- 3xGuy

Answer 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() { }
}

- Dagnogo Jean-François

Answer 2

我认为你的问题一定是出在其他地方。我使用枚举和[ngClass]绑定重新创建了你的场景，对我来说运行良好：

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

你的模板是否在单独的.html文件中，而不是在第一种情况下？我曾经遇到过这样的问题，即组件文件中的私有变量无法被模板文件读取。

- Adam

---

它在一个单独的HTML文件中。 - 3xGuy

问题在于它是私有的。 - 3xGuy