Angular-如何将NGCLASS逻辑从模板移动到TS文件？

Question

在Angular应用程序中，我正在使用下拉过滤器进行用户选择。我已经在ngclass

＆lt; div [ngclass] =“ i＆gt; 2＆amp;＆amp; armp; armp; armp; armp; armp; array-design'“＆gt;

中如何移动分类为控制器的逻辑？就像它们在模板中时一样，无法单位测试它们。

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