如何解决 promise 的翻译问题？

Question

我是新手 angular2。我正在制作一个网站来开始玩这个平台。问题是当我查询 API 消息时无法正确转换对象。虽然我认为promise有问题。

代码组件如下：

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();
    }
}

服务准则是：

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);
    }

}

HTML代码的组成部分：

<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>

还有班级：

export class Noticia {
    public Id: number;
    public Titol: string;
    public Cos: string;
    public Autor: string;
    public PathImage: string;
    public Data: Date;
}

如果有人发现错误在哪里并告诉我在哪里可以找到明确的承诺将不胜感激。

谢谢！！

Answer 1

我建议使用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);
    }
}

并使用您的服务：

getNoticies(): void {
    this._noticiesService.getNoticies()
    .subscribe(
       noticies => this.llistaNoticies = noticies,
       err => console.log(err)
    );
    console.log('getNoticies() passat!')
}