How can I solve the translation of promises? - html

Question

I'm newbie angular2. I'm making a website to start playing this platform. The problem is that when I query the API news can not transform objects correctly. Although I think there is a problem with the promises.
The code component is as follows:
import { Component } from '#angular/core';
import { Router } from '#angular/router';
import { AuthenticationService } from '../Service/Authentication.service';
import { NoticiesService } from '../Service/Noticies.service';
import { Logger } from '../Service/Logger.service';
import { Noticia } from '../Model/Noticia';
#Component({
selector: 'my-home',
templateUrl: 'app/View/html/Home.component.html',
styleUrls: ['app/Content/css/app.component.css'],
})
export class HomeComponent {
llistaNoticies: Noticia[];
missNoticies = 'Noticies Actuals:';
authenticatedUser = localStorage.getItem('usuari');
sessionUp = this._serviceAuthentication.isSession;
constructor(
private _logger: Logger,
private _serviceAuthentication: AuthenticationService,
private _noticiesService: NoticiesService) { }
getNoticies(): void {
this._noticiesService.getNoticies()
.then(noticies => this.llistaNoticies = noticies);
console.log('getNoticies() passat!')
}
ngOnInit(): void {
this.getNoticies()
console.log('ngOnInit() passat!')
}
logOut() {
this._serviceAuthentication.logOut();
}
}
The Code of Service is:
import { Injectable } from '#angular/core';
import { Router } from '#angular/router';
import { Http, Response,
Headers, RequestOptions } from '#angular/http';
import 'rxjs/add/operator/toPromise';
import { Noticia } from '../Model/Noticia';
#Injectable()
export class NoticiesService {
private URLNoticies = 'http://localhost:50541/api/Noticies';
constructor(
private _router: Router,
private _http: Http) { }
getNoticies(): Promise<Noticia[]> {
return this._http.get(this.URLNoticies)
.toPromise()
.then(response => response.json().data as Noticia[])
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
The component of HTML code:
<div class="block-general m-t-1 subTitolPag">
<h2 class="titolPag">Notícies d'actualitat:</h2>
</div>
<div class="row p-a-1">
<div id="block-central" class="block-sub col-md-6 offset-md-2">
<div *ngFor="let noticia of llistaNoticies">
<hr />
<div class="card">
<img class="card-img-top imgNoticia" src="{{noticia.PathImatge}}" alt="Card image cap" style="max-width: 100%;">
<div class="card-block">
<h4 class="card-title titolNoticia">{{noticia.Titol}}</h4>
<p class="card-text">{{noticia.Cos}}</p>
<div class="clearfix">
<h5 class="pull-xs-right">Autor: <span class="label label-default pull-xs-right">{{noticia.Autor}}</span></h5>
</div>
<div>
<h6 class="pull-xs-right">Data de: {{noticia.Data}}</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 block-sub m-x-1 p-a-1">
<p>Usuari registrat: <span class="text-uppercase">{{authenticatedUser}}</span></p>
<div class="clearfix m-t-1">
<button type="submit" class="btn btn-primary pull-xs-right" (click)="logOut()">Desconecta</button>
</div>
</div>
</div>
And the class:
export class Noticia {
public Id: number;
public Titol: string;
public Cos: string;
public Autor: string;
public PathImage: string;
public Data: Date;
}
If someone finds where is the error and tell me where I can find clear promises would be very grateful.
Thank you!!

Answer 1

I recommend to use Observables.
#Injectable()
export class NoticiesService {
private URLNoticies = 'http://localhost:50541/api/Noticies';
constructor(
private _router: Router,
private _http: Http) { }
getNoticies(): Observable<Noticia[]> {
return this._http.get(this.URLNoticies)
.map(response => response.json().data as Noticia[])
.catch(this.handleError);
}
private handleError(error: any): Observable<any> {
console.error('An error occurred', error);
return Observable.of(error.message || error);
}
}
And consume your service:
getNoticies(): void {
this._noticiesService.getNoticies()
.subscribe(
noticies => this.llistaNoticies = noticies,
err => console.log(err)
);
console.log('getNoticies() passat!')
}