Angular 5中使用ngFor指令获取首个元素报错求助

嘿，刚入门Angular踩这个坑太正常了！我当初也对着这个报错懵了好久，其实问题出在Angular版本的语法变化上——你看的教程大概率用的是非常早期的Angular版本（甚至可能是AngularJS 1.x），而现在的Angular已经废弃了ngForFirst这种写法。

问题根源 #

在Angular 2+的稳定版本中，ngFor指令的导出变量（比如判断首个/最后一个元素的标识）不再使用ngForFirst、ngForLast这类带前缀的写法，而是改成了用let关键字直接声明变量，并绑定到指令内置的导出属性上。

正确写法示例 #

假设你的颜色数组定义为colors: string[] = ['red', 'blue', 'green'];，修改后的完整代码应该是这样：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
    <div *ngFor="let color of colors; let isFirst = first">
      {{ color }}
      <!-- 用自定义的isFirst变量判断是否为首个元素 -->
      <span *ngIf="isFirst">（这是数组第一个元素）</span>
    </div>
  `
})
export class TestComponent implements OnInit {
  // 示例颜色数组
  colors: string[] = ['红色', '蓝色', '绿色'];

  ngOnInit(): void {
    // 你的初始化逻辑
  }
}

常用的ngFor导出变量 #

除了first，还有这些常用的内置属性可以通过let声明使用：

• last：判断当前元素是否为数组最后一个元素
• index：获取当前元素的索引值（从0开始）
• even/odd：判断当前元素的索引是否为偶数/奇数

为什么教程里没报错？ #

如果教程里能正常使用ngForFirst，那它对应的应该是AngularJS（1.x版本）或者Angular 2的极早期测试版本，这些版本的语法和现在的稳定版差异很大。建议你尽量跟着对应Angular当前稳定版的教程学习哦。

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