Estoy tratando de practicar Typescript y me encontré con un problema que parece ser un problema de Angular o al menos estoy recibiendo comentarios contradictorios.
En mi vista Angular, estoy tratando de recorrer una matriz estática de luchadores en una Roster de clase. Aquí está la definición de clase:
export class Roster { static Fighters: Array<Fighter> = [ ... ] } En mi opinión, estoy tratando de recorrer los Fighter s predefinidos con:
<ng-container *ngFor="let fighter of Roster.Fighters; let i = index">Sin embargo, aparece un error aquí, con el mensaje:
La propiedad 'Fighters' no existe en el tipo 'Roster'. ¿Quería acceder al miembro estático 'Roster.Fighters' en su lugar?ngtsc(2576)
Esto es confuso debido a que ya accedí a la matriz de luchadores en la clase misma, aquí está el otro miembro de mi clase Roster
export class Roster { static fighterLookup(fighterId: number): Fighter { console.log(Roster.Fighters[fighterId]); } ... }Y en mi componente, simplemente asigné una variable Roster a la definición de clase:
export class AppComponent { Roster: Roster = Roster; } Entonces, ¿puedo acceder a la lista de luchadores con Roster.Fighters en el archivo mecanografiado pero no puedo hacerlo en el bucle ngFor? ¿Qué me estoy perdiendo? ¿Necesito definirlo de alguna otra manera en mi componente para poder acceder a la matriz estática?
La razón principal de tal comportamiento es porque en la clase TypeScript siempre tiene acceso al método estático por el nombre de la clase (es Roster en su caso), es parte del lenguaje JavaScript.
En la plantilla angular, no tiene acceso a la clase en sí, solo una instancia de esta clase (es como una new Roster todo el tiempo)
En este caso, puede agregar algún getter a la clase:
export class Roster { static Fighters: Array<Fighter> = [ ... ] get FightersView() { return Roster.Fighters; } }