Template showing [object object]

Hey rapropos

So here is my code from the project. this is just a test app, to get familiar with ionic/typescript
my component :

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-game',
  templateUrl: 'game.html',
})
export class GamePage {
  // players object
  players:any;
  // active player object
  activePLayer:any;

  gameDetails:any;
  sets:string;
  legs:string;
  pageTitle:string;
  lastScore:string;
  currentScoreUI:string;
  
  
  	constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.currentScoreUI;
      this.players = {
        p1: {
          name: '',
          currentScore: 501,
          currentScoreUI: '',
          scores: [],
          lastScore: '',
          dartsThrown: 0,
          average: 0
        },
        p2: {
          name: '',
          currentScore: 501,
          currentScoreUI: '',
          scores: [],
          lastScore: '',
          dartsThrown: 0,
          average: 0
        }
      }
  	}

  	ionViewDidLoad() {
      this.gameDetails = this.navParams.get('data')
      this.pageTitle = this.gameDetails.gameType.name;
      this.sets = this.gameDetails.sets.name;
      this.legs = this.gameDetails.legs.name;
      this.activePLayer = this.players.p1;
      
    }
    

  	enterNumber(number) {
  		this.currentScoreUI += number;
  		
  	}
  	enterScore() {
      this.activePLayer.currentScoreUI = this.currentScoreUI;
      if (this.activePLayer.name = 'p1') {
        this.activePLayer =  this.players.p2;
      } else {
        this.activePLayer = this.players.p1;
      }
      
  	}
}

so the components create two player objects, and then sets an activePlayer to one of them.
also is a function to update the user score and assing new activePlayer

template:

<ion-header ng-if="dataReady">
  <ion-navbar color="header-blue">
    <ion-title>
      {{activePLayer.name}}
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content color="primary" class="page-game">
	<div class="page-game__main-wrapper">
		<div class="page-game__names">names</div>
		<div class="page-game__stats">
			<div class="page-game__stats-sets-legs-wrapper">
				<span class="page-game__stats-sets-set">Sets : {{sets}}</span>
				<span class="page-game__stats-sets-leg">Legs : {{legs}}</span>
			</div>
			<div class="page-game__stats-sets-legs-wrapper">
				<div lass="page-game__stats-sets-inner">
					<span class="page-game__stats-label">Last Score</span>
					<span class="page-game__stats-value">{{activePLayer.lastScore}}</span>
				</div>
				<div lass="page-game__stats-sets-inner">
					<span class="page-game__stats-label">Darts thrown</span>
					<span class="page-game__stats-value">{{activePLayerdartsThrown}}</span>
				</div>
				<div lass="page-game__stats-sets-inner">
					<span class="page-game__stats-label">Average</span>
					<span class="page-game__stats-value">{{activePLayer.average}}</span>
				</div>
			</div>
		</div>
		<div class="page-game__scores">
			<span class="page-game__scores-title">Current Score</span>
			<span class="page-game__scores-score">{{currentScoreUI}}</span>
			<span class="page-game__scores-checkout">Checkout</span>
			<span class="page-game__scores-checkout-value">T20 D16</span>
		</div>
		<div class="page-game__numbers">
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number" (click)="enterNumber(1)">1</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(2)">2</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(3)">3</span>
			</div>
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number" (click)="enterNumber(4)">4</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(5)">5</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(6)">6</span>
			</div>
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number" (click)="enterNumber(7)">7</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(8)">8</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(9)">9</span>
			</div>
			<div class="page-game__numbers-row">
				<span class="page-game__numbers-row-number">
					<ion-icon name="close-circle"
						class="page-game__numbers-icon"></ion-icon>
				</span>
				<span class="page-game__numbers-row-number" (click)="enterNumber(0)">0</span>
				<span class="page-game__numbers-row-number" (click)="enterScore()">
					<ion-icon name="checkmark-circle"
						 class="page-game__numbers-icon"></ion-icon>
				</span>
			</div>
		</div>
	</div>
</ion-content>

and here the template shows one player at a time, and after a user hits enterScore(), his score is changed, and the other user is set as active in the controller.

my problem is doing this with typescript, and i feel like im not understanding assignment/declaration correctly. but when i try this in a few things happen…

i print {{activePlayer}} and i get [object object]
i print {{activePlayer.name}} nothing rendered

I know i have the object set to ‘any’, and this part i am confused about, in terms of objects, as online i seen many ways, and not sure which is ‘correct’.

hope this helps you to help me ha