角度類方法不工作時填充服務

Question

我正在學習Angular 4，我無法弄清楚如何讓類方法工作。

我有一個功能類，它包括一些允許構建谷歌圖表JSON數據表的方法。

export class Feature { 
    id: string; 
    name: string; 

    get cols() { 
     return [ 
     {'id': '', 'label': 'id', 'type': 'string'}, 
     {'id': '', 'label': 'name', 'type': 'string'} 
     ]; 
    } 

    get row() { 
     console.log('foo'); 
     return {'c': [ {'v': this.id}, {'v': this.name} ] }; 
    } 

} 

我有填充從REST API的功能服務：

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

import 'rxjs/add/operator/toPromise'; 
import { Feature } from './feature'; 

@Injectable() 
export class FeatureService { 
    private featureUrl = 'http://raspi/rest/api'; 

    constructor(private http: Http) { } 

    getFeatures(): Promise<Feature[]> { 
    return this.http.get(this.featureUrl + '/getFeatures') 
     .toPromise() 
     .then(response => response.json().results as Feature[]) 
     .catch(this.handleError); 
    } 

    private handleError(error: any): Promise<any> { 
    console.error('An error occurred', error); // for demo purposes only 
    return Promise.reject(error.message || error); 
    } 
} 

然後在我的組件，在初始化，我調用服務，並嘗試實例數組轉換成谷歌數據表：

import { Component, OnInit } from '@angular/core'; 
import { Feature } from '../feature'; 
import { FeatureService } from '../feature.service'; 

@Component({ 
    selector: 'app-features', 
    templateUrl: './features.component.html', 
    styleUrls: ['./features.component.css'] 
}) 
export class FeaturesComponent implements OnInit { 
    features: Feature[]; 

    public tableData = { 
    chartType: 'Table', 
    dataTable: {}, 
    options: {'title': 'Tasks'}, 
    }; 

    constructor(
    private featureService: FeatureService 
) { } 

    private features2dataTable(features: Feature[]) { 
    const data = { 
     'cols': [], 
     'rows': [] 
    } 

    features.forEach(function(feature) { 
     console.log(feature); 
     data.cols = feature.cols; 
     data.rows.push(feature.row); 
    }); 
    console.log(data); 
    return data; 
    } 

    getFeatures(): void { 
    this.featureService 
     .getFeatures() 
     .then(features => this.tableData.dataTable = this.features2dataTable(features)) 
    } 

    ngOnInit(): void { 
    this.getFeatures(); 
    } 

} 

我想要的數據表中有這樣的格式：

{ 
    "cols": [ 
     {"id":"","label":"Topping","pattern":"","type":"string"}, 
     {"id":"","label":"Slices","pattern":"","type":"number"} 
     ], 
    "rows": [ 
     {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]}, 
     {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}, 
     {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]} 
     ] 
} 

但是當我使用feature.row或feature.cols，我回來不確定，即使「id」和實例的「名稱」字段填入：

{id: "BP01", name: "BP feature one"} 
    id: "BP01" 
    name: "BP feature one" 
    __proto__: Object 
    features.component.ts:30 

{id: "BP02", name: "BP feature two"} 
    id: "BP02" 
    name: "BP feature two" 
    __proto__: Object 
    features.component.ts:34 

{cols: undefined, rows: Array(2)} 
    cols: undefined 
    rows: (2) [undefined, undefined] 
    __proto__: Object 

爲什麼不弄方法工作？

Answer 1

正在做...

.then(response => response.json().results as Feature[]) 

實際上並沒有創建一個Feature對象的數組，因此您無法訪問任何類特定的方法，因爲它們只是POJO的。

你需要明確讓你的類的對象實例，所以是這樣的：

getFeatures() { 
    return this.http.get(this.featureUrl + '/getFeatures') 
    .toPromise() 
    .then(response => response.json().results.map(obj => Object.assign(new Feature(), obj))) 
    .catch(this.handleError); 
} 

Answer 2

我最初的想法是，你需要定義既setter和一個getter：

export class Feature { 
    id: string; 
    name: string; 
    private _cols; 

    get cols() { 
     return this._cols; 
    } 

    set cols() { 
     this._cols = [ 
     {'id': '', 'label': 'id', 'type': 'string'}, 
     {'id': '', 'label': 'name', 'type': 'string'} 
     ]; 
    } 

    /** 
     Same as above for rows 
    */ 

} 

然而，這可能是不正確的，因爲你使用一個類，這裏​​類型 - 您的控制檯上.log @第30行，你只是輸出col數據，而不是整行？似乎你沒有得到正確的數據。

你想是這樣的：

[ 
    { 
    cols: [...], 
    row: {...} 
    } 
] 

，但你得到：

[ 
{...} // col & row data 
] 

嘗試做在傳遞給features2datatable功能特徵的console.log，這應該避開你在正確的方向:)