角度2のAPIを読み込んでいます ''未定義の '1'のプロパティを読み取ることができません

Question

私はプロジェクトに問題があります。サーバー上のAPIからデータを取得してオブジェクトを取得し、データ。しかし、問題は、コンソールがオブジェクトが未定義であると言うことです。

これはこれは、コンソールの上部に表示される最初のエラーでコンソール

の出力です。

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) 

この私のコードの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[]; 
} 

これは私のインメモリ・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()); 
    } 
} 

これは、プロファイルのコードです.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); 
    } 
} 

これは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

最初にUserCardsはありません。この配列は非同期にロードされます。したがって、Angularがコンポーネントマークアップをレンダリングするときは未定義です。問題を回避するには、ngIfを使用してください。