Reading API on Angular 2 Error of 'Cannot read property of "1" of Undefined'

Question

I am having a problem with my project because I getting data from an API on a server and taking on of the objects and populating it with the data. But the problem is that the console says that the Object is Undefined.

This is the output of the console

This is the first error that appears on the top of the console.

ERROR TypeError: Cannot read property '1' of undefined
    at Object.eval [as updateRenderer] (ProfileComponent.html:58)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13124)
    at checkAndUpdateView (core.es5.js:12268)
    at callViewAction (core.es5.js:12631)
    at execComponentViewsAction (core.es5.js:12563)
    at checkAndUpdateView (core.es5.js:12269)
    at callViewAction (core.es5.js:12631)
    at execEmbeddedViewsAction (core.es5.js:12589)
    at checkAndUpdateView (core.es5.js:12264)
    at callViewAction (core.es5.js:12631)

This my code cardsdata.ts:

export class CardsData {
    layout: string;
    name: string;
    manaCost: string;
    cmc: number;
    colors: string[];
    type: string;
    types: string[];
    subtypes: string[];
    text: string;
    power: number;
    toughness: number;
    imageName: string;
    colorIdentity: string[];
}

This is the code of my in-memory-data.service.ts:

import { Headers, Http, Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

import { Injectable } from '@angular/core';

@Injectable()

export class InMemoryDataService {
       constructor(private http: Http) { }

    getCardsData() {
         return                               
         this.http.get(`https://magicdeckmanager.herokuapp.com/dummy/cards`)
         .map((res: Response) => res.json());
    }
}

This is the code of profile.component.ts:

import { Component, OnInit } from '@angular/core';
import { InMemoryDataService } from '../service/in-memory-data.service';
import { CardsData } from '../service/cardsdata';
import { Router } from '@angular/router';


@Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

    UserCards: CardsData[];
    constructor(
        private InMemoryDataService: InMemoryDataService,
        private router: Router
    ) { }

    ngOnInit() {
        this.loadCards();
    }

    public loadCards(): void {
        this.InMemoryDataService.getCardsData().subscribe(data => this.UserCards = data);
    }
}

And this is the HTML:

<div class="img-with-text">
   <img src="../assets/profile-img.jpg" alt="sometext" />
   <br/>
   <div class="form-group">
     <label for="exampleInputFile">File input</label>
     <input type="file" id="exampleInputFile">
    </div>
   <br/>
   <h4>User Info:</h4>
</div>


<h4>
  <table class="table">
    <tr>
      <td class="success">User ID:</td>
      <td class="success">Username:</td>
      <td class="success">User E-mail:</td>
      <td class="success">Full Name:</td>
      <td class="success">Phone Number</td>
    </tr>
  </table>
</h4>

<div>
    <h4>
    <table class="table">
         <tr>
          <td class="danger" href="User_id">#325892</td>
          <td class="active" href="User_name">Reponic</td>
          <td class="warning" href="User_email">reponic340@gmail.com</td>
          <td class="active" href="User_FullName">Miguel Tannous</td>
          <td class="success" href="User_phone">+17098691528</td>
        </tr>
      </table>
    </h4>
</div> -->

<h4>
    <div>{{UserCards[1].name}}</div>
</h4>

Answer 1

You don't have UserCards initially. This array is loaded asynchronously. So, it is undefined when Angular renders the component markup. Use ngIf to avoid the issue:

  <h4 *ngIf="UserCards">
   <div>{{UserCards[1].name}}</div>
  </h4>