将 ngClass 代码从 HTML 移动到 Typescript 函数中

Question

希望有人能帮忙。我是 Angular 的新手，刚刚开始学习如何应用条件类。我有一个带有状态列的表，我想根据状态添加一个类，例如，如果它是活动状态，我希望该<td>有一个"活动"类。

我通过将以下内容添加到我的 HTML 中来使其工作：

<td class="" [ngClass]="{ 'active': this.sysuser.status === 'Active', 'pending': this.sysuser.status === 'Pending Setup' }">{{sysuser.status}}</td>

但我更喜欢的是将其包装在我的 .ts 文件中的函数中，所以它会像这样：

<td class="first_of_group center date" [ngClass]="setStatusClass()">{{sysuser.status}}</td>

然后在我的 .ts 文件中：

setStatusClass(){
   // insert required code here
}

希望有人能帮忙！

Answer 1

您可以将 getter 用作：

get StatusClass() {
    let class = '';
    switch(this.sysuser.status) {
        case 'Active':
            class = 'active';
            break;
        case 'Pending Setup':
            class = 'pending';
            break;
    }
    return class;
}

.HTML

<td class="first_of_group center date" [ngClass]="StatusClass">{{sysuser.status}}</td>

Answer 2

我找到了一个解决方案......

<td class="" [ngClass]="setStatusClass(sysuser.status)">{{sysuser.status}}</td>

功能

setStatusClass(status) {
    switch (status) {
      case 'Active':
        return 'active';
      case 'Pending Setup':
        return 'pending';
    }
  }