ng-repeat로 ion-item에 JSON 파일의 내용 표시

Question

다음 코드를 사용하여 JSON 파일에서 데이터를로드하고 ion-list에 ion-item으로 표시하지만 작동하지 않습니다. 내가하는 일에 무엇이 잘못되었는지를 알 수는 없다.

import { Component } from "@angular/core"; 
import { HttpClient} from "@angular/common/http"; 

/** 
* Interface for a single Call entry 
* A Call always has a 'name:string' and a 'telephone:string', any 
* other attribute is optional. 
*/ 
export interface Call { 
    name:   string, 
    telephone:  string, 
    description?: string, 
    street?:  string, 
    postal?:  string 
} 

/** 
* Interface for a list of Call entries 
*/ 
export interface CallList { 
    calls: Call[]; 
} 

/** 
* Class for a page that shows Call entries 
*/ 
@Component({ 
    selector: 'page-calls', 
    templateUrl: 'calls.html' 
}) 
export class CallsPage { 

    callList: CallList; 

    /** 
    * Constructor of CallsPage 
    * @param http 
    */ 
    constructor(public http: HttpClient) { 
     this.loadCalls('assets/json/calls.json'); 
     // console.log(this.callList); // does not work, just gives "undefined" 
    }; 

    /** 
    * Loads list of calls from a json file 
    * @param filePath: Path to file that shall be loaded 
    */ 
    loadCalls(filePath: string) { 
     return this.http.get<CallList>(filePath).subscribe(
      data => { 
       this.callList = data; 
       // console.log(data); // works 
      } 
     ); 
    }; 
} 

calls.json 이것은

<ion-header> 
    <ion-navbar> 
     <button ion-button menuToggle> 
      <ion-icon name="menu"></ion-icon> 
     </button> 

     <ion-title>Calls</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-list> 
     <ion-item ng-repeat="call in callList"> 
      {{call.name}}: {{call.telephone}} 
     </ion-item> 
    </ion-list> 
</ion-content> 

을 사용하는 템플릿 calls.html입니다

[ 
{"name": "Police","telephone": "110","description": ""}, 
{"name": "Fire","telephone": "112","description": ""} 
] 

포함하지만 내 응용 프로그램에서이 페이지를 열 때, 다음과 같은 콘솔에 나타납니다 Unhandled Promise rejection: _co.call is undefined ; Zone: <root> ; Task: Promise.then ; Value: . JSON에서 데이터를 가져 오는 중 여전히 잘못된 방법이 있다고 생각합니다. 주석 처리 된 생성자의 행은 콘솔에 undefined을 제공합니다. 그러나 .subscribe 호출에서 같은 작업을 수행하면 데이터가 인쇄됩니다. 그래서 나는 문제가 어디에 있는지 알 수 없다.

Answer 1

당신은 angular 구문 ngFor 대신에 설립 것처럼`ngFor`해야 그 외에 angularjs 1.x 구문

<ion-item *ngFor="let call of callList"> 
    {{call.name}}: {{call.telephone}} 
</ion-item>