Angular2 - Unresolved Variables

Question

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

you should learn how to post a question with proper formatting i just fixed you post with too many formatting errors , see here for help before posting. stackoverflow.com/help/how-to-ask — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Nov 13, 2017 at 17:34

LLai · Accepted Answer · 2017-11-13 17:32:42Z

1

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>

answered Nov 13, 2017 at 17:32

LLai

13.5k3 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andrew Laurenson Over a year ago

so i can't do this ? <div class="row"> <div class="col-xs-12"> <a href="#" class="list-group-item clearfix" *ngFor="let player of players"> <div class="pull-left"> <h4 class="list-group-item-heading"> {{ players.playerName }}</h4> <p class="list-group-item-text"> {{ players.favHero }}</p> </div>

LLai Over a year ago

@AndrewLaurenson when you do players.playerName & players.favHero you are accessing the entire array. Within your ngFor block, you want to only access each iteration of the array, which you define let player (<-- single iteration of players) of players. So instead do player.playerName & player.favHero

Andrew Laurenson Over a year ago

OK i get it now, thanks! Unfortunately i'm still getting problems compiling now, stupid old "aw snap" on chrome! no idea why its doing this now. Thanks though

LLai Over a year ago

@AndrewLaurenson that is usually caused by some issue outside of your app. (internet, cache, hanging process, etc.)

LLai Over a year ago

@AndrewLaurenson guess it could be an infinite loop

|

Collectives™ on Stack Overflow

Angular2 - Unresolved Variables

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related