CODEWITHSUNDEEP
htmlangulartypescript
Andrew Laurenson
Andrew Laurenson

Reputation: 21

Angular2 - Unresolved Variables

Complete noob looking for help, I've been learning Angular2 and attempting to make a basic app but now its broken!

The component.ts file

import {Component, OnInit} from '@angular/core';
import { Player } from './player.model';

@Component({
 selector : 'app-player',
 templateUrl : '/player.component.html'
})

export class PlayerComponent implements OnInit {

  players: Player[] = [
  new Player('Malus', 'Lina', 'lol', 3000)
];

  constructor() {}
 ngOnInit() {}

}

model.ts

export class Player {
  public playerName: string;
  public favHero: string;
  public heroImage: string;
  public mmr: number;

  constructor( name: string, favHero: string, heroImage: string, mmr: number) {
    this.playerName = name;
    this.favHero = favHero;
    this.heroImage = heroImage;
    this.mmr =  mmr;
  }
}

lastly where the error is in the HTML

I am trying to use {{ players.playerName }} etc but they are unresolved? I think this is why my app is broken now

apparently, the variables of my array are unresolved?. I don't get it and cant work out why. Appreciate any help thanks

Upvotes: 1

Views: 4908

Answers (1)

LLai
LLai

Reputation: 13396

You are trying to access an object key of an array (players.playerName), which you can't do. You either need to access a particular index players[0].playerName or loop through your players and create a DOM block for each player

<div *ngFor="let player of players">
    {{player.playerName}}
</div>

Upvotes: 1

Related Questions