angular 2 object key selection - angularjs

Question

so i am trying to retrieve data from Api and cant retrieve with key selection
app/app.component.ts
import {Component} from 'angular2/core';
import {Http} from 'angular2/http';
import {httpServiceClass} from './service';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Api} from './api';
#Component({
selector: 'my-app',
templateUrl: 'mytemplate.html',
providers:[httpServiceClass,HTTP_PROVIDERS]
})
export class AppComponent implements OnInit{
private api:Api[];
constructor(private getservice:httpServiceClass){
}
ngOnInit(){
this.getservice.httprequest()
.subscribe(data => this.api = data );
}
}
service file
app/app.service.ts
import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {Api} from './api';
#Injectable()
export class httpServiceClass{
constructor(private http: Http){}
httprequest(): Observable<Api[]>{
return this.http.get(' http://date.jsontest.com')
.map(response => response.json());
}
}
api.ts
export interface Api{
time:string;
date:string;
}
mytemplate.html
<h1 >HTTP : {{api|json}}</h1>
returns HTTP : { "time": "01:52:41 PM", "milliseconds_since_epoch": 1472910761126, "date": "09-03-2016" }
i tried selecting by key
<h1 >HTTP : {{api.time}}</h1>
returns in console
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [api in AppComponent#0:4]

Answer 1

An interface in runtime is nothing in javascript world. Try changing your interface to class and see if it fixes the problem. Then refractor the code accordingly.