当element在element上使用迭代变量时如何重构ngFor？

Question

我有这个

<div
    *ngFor="let dt of totals"
    [ngClass]="{ up: dt.isUp }"
>
    <span> {{ dt }}</span>
</div>

我想重构为 Angular v17 语法

@for (dt of totals; track $index) {
    <span>{{ dt }}</span>
}

如何重构

[ngClass]

上的

<div>

？

我尝试了这个，但显然它不起作用，因为变量

dt

尚未在

<div>

中定义

<div [ngClass]="{ up: dt.isUp }">
    @for (dt of totals; track $index) {
        <span>{{ dt }}</span>
    }
</div>

这会，但我不想在每个元素上都有额外的

ng-container

：

<div>
    @for (dt of totals; track $index) {
        <ng-container [ngClass]="{ up: dt.isUp }">
            <span>{{ dt }}</span>
        </ng-container>
    }
 </div>

执行此操作的官方方法是什么？

Answer 1

像这样吗？

    @for (dt of totals; track $index) {
<div
    [ngClass]="{ up: dt.isUp }"
>
    <span> {{ dt }}</span>
</div>
    }