Angular语言 - 如何将ngClass逻辑从模板移动到ts文件?

Question

在Angular应用中，我使用下拉过滤器来进行用户选择。我在ngClass中添加了逻辑

<div [ngClass]="i > 2 && 'array-design'">

我怎么能移动逻辑为分类到控制器?当它们在模板中时，就不可能对它们进行单元测试。

<ng-container *ngIf="searchFilters.length > 0; else loading">
<div class="filter-items" *ngFor="let filter of searchFilters; index as i">
<div [ngClass]="i > 2 && 'array-design'">
<app-multi-select [items]="filter.navigators" [title]="filter.name"></app-multi-select>
</div>
</div>
</ng-container>

.scss

.cross-reactivity, .array-design{
display: flex;
flex-direction: row;
align-items: center;
margin-right: 5px;
}

Answer 1

可以将条件语句移动到函数中，并在HTML中使用其返回值。

html

---

[ngClass]="filterClass(i)"

ts

const filterClass = (i) => i > 2 && 'array-design';