Angular

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 中使用它的 return。

html

[ngClass]="filterClass(i)"

ts

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

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

Angular - How can I move ngClass logic from template to ts file?

javascript

typescript

ng-class