Typescript 在ngFor循环中无法访问static class成员

Question

我正在尝试练习 Typescript 并遇到了一个似乎是 Angular 问题的问题，或者我至少得到了相互矛盾的反馈

在我的 Angular 视图中，我试图遍历 class Roster中的 static 战士数组。 这是 class 的定义：

export class Roster {
  static Fighters: Array<Fighter> = [
    ...
  ]
}

在我看来，我正在尝试使用以下方法遍历预定义的Fighter ：

<ng-container *ngFor="let fighter of Roster.Fighters; let i = index">

但是我在这里收到错误消息：

“名册”类型不存在属性“战士”。 您的意思是改为访问 static 成员“Roster.Fighters”吗？ngtsc(2576)

这很令人困惑，因为已经访问了 class 本身中的战士数组，这是我Roster中的另一个成员 class

export class Roster {
  static fighterLookup(fighterId: number): Fighter {
    console.log(Roster.Fighters[fighterId]);
  }
  ...
}

在我的组件中，我只是将 Roster 变量分配给 class 定义：

export class AppComponent {
  Roster: Roster = Roster;
}

所以我可以使用Roster.Fighters文件中的 Roster.Fighters 访问战士列表，但我不能在 ngFor 循环中这样做？ 我错过了什么？ 我是否需要在我的组件中以其他方式定义它才能访问 static 数组？

Answer 1

这种行为的主要原因是因为在 typescript class 中，您始终可以通过 class 的名称访问 static 方法（在您的情况下是Roster ），它是 javascript 语言的一部分

在 angular 模板中，您无权访问 class 本身，只能访问此类的实例（一直都像new Roster ）

在这种情况下，您可以向 class 添加一些吸气剂：

export class Roster {
  static Fighters: Array<Fighter> = [
    ...
  ]

  get FightersView() {
     return Roster.Fighters;
  }

}