Angular中使用*ngFor为除首个元素外的所有元素应用CSS

问题原因 #

你代码里的ngclass写法不符合Angular语法规范：Angular的属性绑定需要用方括号[]包裹，且指令名是大写的ngClass，小写的ngclass不会被Angular识别，导致样式类无法正确应用。

修复代码 #

<div class="row">
      <div class="cell col-md-4">Fann dial readings:</div>
      <div class="cell value caption-bold col-md-2" [ngClass]="{'col-md-offset-1': !$first}" *ngFor='let r of mudCheckWorksheet.rheologyTemperatures'>{{r.t}}°F</div>
  </div>

替代方案：纯CSS实现 #

如果不想依赖Angular指令，也可以用CSS选择器直接给非首个元素加样式：

/* 选中row容器内第2个及之后的cell元素 */
.row .cell:nth-child(n+2) {
  margin-left: 8.333333%; /* 等同于col-md-offset-1的偏移量 */
}

（说明：当前效果为所有温度值无左侧偏移，和标题挤在一起；预期效果为除第一个温度值外，其余都带有左侧偏移，排版更规整）

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