代码之家 › 专栏 › 技术社区 › user266909

如何简化模板中的[NGClass]

angular

user266909 · 技术社区 · 6 年前

此模板中的[NgClass]太长。有简单的方法吗?谢谢您。

<ng-container matColumnDef="ThisConsult.Status">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'headerStyle'">Status</th>
  <td mat-cell *matCellDef="let element">
    <div [ngClass]="{'seahawk': element.ThisConsult.Status==='PENDING', 'blue': element.ThisConsult.Status==='ACTIVE',
            'blackOnWhite': element.ThisConsult.Status==='DISCONTINUED', 'grayOnWhite': element.ThisConsult.Status=='COMPLETE',
            'bloody': element.ThisConsult.Status==='CANCELLED'}">
      {{element.ThisConsult.Status}}
    </div>
  </td>
</ng-container>

2 回复 | 直到 6 年前

yurzui 6 年前

您可以简单地使用对象作为字典:

组件

class SomeComponent {
  statuses = {
    PENDING: 'seahawk',
    ACTIVE: 'blue',
    DISCONTINUED: 'blackOnWhite',
    COMPLETE: 'grayOnWhite',
    CANCELLED: 'bloody'
  }
  ...

模板语言

[ngClass]="statuses[element.ThisConsult.Status]"

KShewengger 6 年前

您可以在组件上创建一个函数来调用模板,以避免ngclass上的条件列表太长。

例子:

用户组件

@Component({...})
export class UserComponent {

    constructor() {}

    assignClassByStatus(element: any): string {
        const classes = [
            { name: 'seahawk', type: 'PENDING' },
            { name: 'blue', type: 'ACTIVE' },
            { name: 'blackOnWhite', type: 'COMPLETE' },
            { name: 'grayOnWhite', type: 'DISCONTINUED' },
            { name: 'bloody', type: 'CANCELLED' },
        ];

        const className = classes.find(({ type }) => type === element).name;

        return className;
    }

}

用户模板

...

<td mat-cell *matCellDef="let element">
   <div [ngClass]="assignClassByStatus(element)">{{element.ThisConsult.Status}}</div>
</td>

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

Jihed Ben Zarb · 造型角材料日期选择器

6 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

6 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

6 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

6 月前

Jace Johnson · Typescript文件读取的变量类型错误

6 月前

Ole · Angular资源API是否支持为资源添加初始值?

6 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

6 月前