Angular使用ngStyle设置条件样式仅对第2条后条目生效问题

现有代码的样式判断逻辑仅依赖列表总长度，只要列表长度大于2，所有循环渲染的条目都会命中灰色背景规则，没有关联单个条目的位置，因此不符合预期。

Angular的*ngFor指令可以导出当前循环项的索引（索引从0开始计数），拿到索引后判断当前项是否为第2条之后的条目，再决定是否应用灰色背景即可，修复后的代码如下：

<h4 *ngFor="let x of textAddedList; let i = index" 
    [ngStyle]="{backgroundColor: i >= 2 ? 'grey' : 'transparent'}">
    {{x}}
</h4>

• 索引i = 0：列表第1条，透明背景
• 索引i = 1：列表第2条，透明背景
• 索引i ≥ 2：列表第3条及后续所有条目（即第2条之后的条目），灰色背景

如果偏好使用样式类控制样式，也可以用[ngClass]实现，逻辑一致：

1. 先在组件样式文件中定义背景类

.grey-background {
  background-color: grey;
}

2. 模板中绑定类判断逻辑

<h4 *ngFor="let x of textAddedList; let i = index" 
    [ngClass]="{'grey-background': i >= 2}">
    {{x}}
</h4>

内容的提问来源于stack exchange，提问作者cha1nsaw