Angular 17语法重构：带[ngClass]的*ngFor转换方法

你之前的问题核心是没理清*ngFor和@for在元素结构上的对应关系：原来的*ngFor直接作用在带[ngClass]的<div>上，每一次循环都会生成一个带有对应样式的<div>，内部包含<span>。

正确的重构方式就是把原来的<div>直接放进@for的循环体里，这样循环体内的dt变量可正常访问，[ngClass]也能正确绑定：

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

这样重构后的代码和原*ngFor版本完全等价，既不会额外增加DOM元素，也能给每个循环生成的<div>绑定对应类名。

注：后续已明白问题所在，因遗忘*ngFor会重复所在元素及子元素的基础概念，特此留存问题帮助他人。

内容的提问来源于stack exchange，提问作者display-name unset