如何在模型上实现打字稿上的新字段？

I create test.model.ts:

我创建test.model.ts:

export interface IPosting {
    text: string;
    docDate: string;
    isDebit: boolean;
    amount: number;
    debitAmount: string;
    creditAmount: string;
}

export class Posting implements IPosting {
    text: string;
    docDate: string;
    isDebit: boolean;
    amount: number;
    debitAmount: string;
    creditAmount: string;

    constructor(text: string, docDate: string, isDebit: boolean, amount: number) {
        this.text = text;
        this.docDate = docDate;
        this.isDebit = isDebit;
        this.amount = amount;
        this.debitAmount = (isDebit) ? this.amount.toString() : '';
        this.creditAmount = (isDebit) ? '' : this.amount.toString();
    }
}

Next I build service to get data from request test.service.ts:

接下来,我构建服务以从请求test.service.ts获取数据:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

import { IPosting, Posting } from './test.model';

@Injectable()
export class TestService {

    constructor(private http: Http) {

    }

    getPostings(): Promise<IPosting[]> {
        let token = localStorage.getItem('access_token');
        let authorization = "Bearer " + token;

        let headers = new Headers({ Authorization: authorization, 'X-Requested-With': 'XMLHttpRequest' });
        let options = new RequestOptions({ headers: headers });

        return this.http.get('/api/data', options)
            .toPromise()
            .then(res => res.json())
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.log('Error occured: ' + error);
        return Promise.reject(error.message || error);
    }
}

On @Component I try to render data fro service response:

在@Component上我尝试从服务响应中呈现数据:

export class GLComponent implements OnInit {
    private http: Http;
    postings: IPosting[];

    constructor(http: Http, private router: Router, private testService: TestService) {
        this.postings = [];
    }

    ngOnInit() {
        this.loadPostings();
    }

    loadPostings() {
        this.testService.getPostings()
            .then(postings => this.postings = postings)
            .catch(error => {
                // ...    
            });
    }
}

Then data display on html. From request in response I get json with only 'text', 'docDate', 'isDebit', 'amount' fields. But I need to form in model new fields based on allready existing. Code above not working.

然后在html上显示数据。从响应请求中我得到json只有'text','docDate','isDebit','amount'字段。但我需要在已经存在的基础上形成模型新领域。上面的代码不起作用。

1 个解决方案

#1

How about mapping the element you receive into Posting objects?

如何将您收到的元素映射到Posting对象?

loadPostings() {
    this.testService.getPostings()
        .then(postings => {
          this.postings = postings.map(p => {
            // convert anonymous object into a Posting object
            return new Posting(p.text, p.docDate, p.isDebit, p.amount);
          });
        )
        .catch(error => {
            // ...    
        });
}

After that, you'll have an array of Posting objects in this.postings.

之后,你将在this.postings中有一组Posting对象。

#1