自定义Angular指令在WebStorm失效：ngFor提示"Expression expected"

我创建了一个名为ngForFlTrackByIndex的自定义指令，用于Angular的ngFor指令中，这个指令在VSCode中运行完全正常，但在WebStorm里会提示**"Expression expected"**错误。指令代码如下：

@Directive({
  selector: '[ngForFlTrackByIndex]',
  standalone: true,
})
export class TrackByIndexDirective<T> {
  constructor(@Host() private readonly _ngFor: NgForOf<T>) {
    this._ngFor.ngForTrackBy = (index: number): number => index;
  }
}

解决方案 #

• 调整WebStorm的Angular语言服务配置
  WebStorm的Angular语言服务对这种注入修改ngFor属性的方式可能存在识别延迟：

  1. 打开WebStorm设置（Windows/Linux按Ctrl+Alt+S，Mac按Cmd+,）
  2. 进入Languages & Frameworks > TypeScript > Angular
  3. 勾选或重新勾选**"Use Angular language service"**，之后重启WebStorm
  4. 也可以尝试禁用再重新启用TypeScript类型检查，刷新项目

• 显式声明TrackByFunction类型
  修改指令代码，显式指定函数的TrackByFunction类型，让WebStorm的类型检查器正确识别：

  import { Directive, Host, NgForOf, TrackByFunction } from '@angular/core';
  
  @Directive({
    selector: '[ngForFlTrackByIndex]',
    standalone: true,
  })
  export class TrackByIndexDirective<T> {
    private readonly trackByFn: TrackByFunction<T> = (index) => index;
  
    constructor(@Host() private readonly _ngFor: NgForOf<T>) {
      this._ngFor.ngForTrackBy = this.trackByFn;
    }
  }
  

• 添加注释忽略错误提示
  如果不想改动代码或配置，可在错误行上方添加注释让WebStorm忽略该错误：

  constructor(@Host() private readonly _ngFor: NgForOf<T>) {
    // noinspection ExpressionJSParseError
    this._ngFor.ngForTrackBy = (index: number): number => index;
  }
  

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