Angular 18中如何结合@for与NgClass实现奇偶行样式？

问题重现 #

在Angular 18模板中使用新的@for语法实现表格奇偶行样式时，编写了如下代码：

<tbody>
    @for(element of elements.value; track $index; let idx = $index, let isEven = $even){
       <tr *ngClass="isEven ? 'some styles here' : 'some other styles otherwise' ">
       </tr>
    }
</tbody>

运行时出现错误：

Property 'isEven' does not exist on type 'MyCoomponentName'

尝试使用*ngClass={{isEven ? '' : ''}}的写法也无效。

错误原因 #

新的@for语法中声明的isEven变量属于块级作用域，仅在@for的代码块内有效。而*ngClass是结构指令的语法糖，它的表达式上下文指向组件类，因此无法识别@for块内的局部变量，导致报错。

正确实现方案 #

方案一：使用[ngClass]属性绑定 #

直接使用属性绑定形式的[ngClass]，它的表达式上下文是当前模板的@for块作用域，能正确访问isEven变量：

<tbody>
    @for(element of elements.value; track $index; let isEven = $even){
       <tr [ngClass]="isEven ? 'even-row' : 'odd-row'">
           <!-- 这里填充表格单元格内容 -->
       </tr>
    }
</tbody>

对应的CSS样式：

.even-row {
    background-color: #f8f9fa; /* 偶数行背景色 */
}
.odd-row {
    background-color: #ffffff; /* 奇数行背景色 */
}

方案二：用CSS原生选择器（更简洁） #

如果不需要在模板中处理逻辑，直接使用CSS的:nth-child选择器即可实现奇偶行样式，无需依赖模板变量：

<tbody>
    @for(element of elements.value; track $index){
       <tr>
           <!-- 这里填充表格单元格内容 -->
       </tr>
    }
</tbody>

对应的CSS样式：

tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

内容的提问来源于stack exchange，提问作者Marlon Alejandro Espinosa Cast