(Angular at fault)继承后函数成员不存在(TypeError:row.dynamicProperties不是函数)

时间:2016-04-04 12:39:24

标签: javascript angularjs inheritance typescript

我正在运行angular / mvc网站。我将所有模型和内容分开。 在某些时候,我觉得需要一个额外的属性,这不属于我的模型。我虽然继承并开始编写代码。 首先我选择了getter'看到它被简单地覆盖了,我虽然知道了类似intellisense方法所支持的东西,所以不用思考就不会覆盖它。

这里我写的是:

/**
 * Created by Hassan on 4/4/2016.
 */
abstract class DynamicPropertiesProvider {
    private _dynamicProperties:Object;

    constructor() {
        this._dynamicProperties = {};
    }

    dynamicProperties():Object {
        return this._dynamicProperties;
    }
}

然后我在我的模型中使用它,如:

/**
 * Created by Hassan on 3/16/2016.
 */

///<reference path="dynamicPropertiesProvider.ts"/>
class AcDocRow extends DynamicPropertiesProvider{
    public FinYear: string;
    public DocNoTemp: number;
    public DocRow: number;
    public HsbCod: string;
    public RowDsc: string;
    public Bedehkar: number;
    public Bestankar: number;
    public Bookmark: boolean;
    public MainDocNo: number;
    public DocDate: string;

    //Getters And Setters
    get CompositeKey():string {
        return this.FinYear + "-" + this.DocNoTemp + "-" + this.DocRow;
    }

    get Date():string {
        return ((this.DocDate) ? this.DocDate.substr(0, 4) + "/" + this.DocDate.substr(4, 2) + "/" + this.DocDate.substr(6, 2) : "");
    }

    constructor(finYear, docNoTemp, docRow, hsbCod, rowDsc, bedehkar, bestankar, bookmark, mainDocNo, docDate){
        super(); //Call Super (Parent) Class Constructor
        this.setup();
        if (finYear != undefined) this.FinYear = finYear;
        if (docNoTemp != undefined) this.DocNoTemp = docNoTemp;
        if (docRow != undefined) this.DocRow = docRow;
        if (hsbCod != undefined) this.HsbCod = hsbCod;
        if (rowDsc != undefined) this.RowDsc= rowDsc;
        if (bedehkar != undefined) this.Bedehkar = bedehkar;
        if (bestankar != undefined) this.Bestankar= bestankar;
        if (bookmark != undefined) this.Bookmark = bookmark;
        if (mainDocNo != undefined) this.MainDocNo= mainDocNo;
        if (docDate != undefined) this.DocDate= docDate;
    }

    private setup():void{
        this.FinYear = "";
        this.DocNoTemp = 0;
        this.DocRow = 0;
        this.HsbCod = "";
        this.RowDsc = "";
        this.Bedehkar = 0;
        this.Bestankar = 0;
        this.Bookmark = false;
        this.MainDocNo = 0;
        this.DocDate = "";
    }

    public copy():AcDocRow{
        return new AcDocRow(this.FinYear, this.DocNoTemp, this.DocRow, this.HsbCod, this.RowDsc, this.Bedehkar, this.Bestankar, this.Bookmark, this.MainDocNo, this.DocDate);
    }

    public resetModel(finYear, docNoTemp, docRow, hsbCod, rowDsc, bedehkar, bestankar, bookmark, mainDocNo, docDate): void{
        this.constructor(finYear, docNoTemp, docRow, hsbCod, rowDsc, bedehkar, bestankar, bookmark, mainDocNo, docDate);
    }
}

但是编译好的JS,不包含我在&#39; DynamicPropertiesProvider&#39;中编写的方法。类:

对于DynamicPropertiesProvider:

/**
 * Created by Hassan on 4/4/2016.
 */
var DynamicPropertiesProvider = (function () {
    function DynamicPropertiesProvider() {
        this._dynamicProperties = {};
    }
    DynamicPropertiesProvider.prototype.dynamicProperties = function () {
        return this._dynamicProperties;
    };
    return DynamicPropertiesProvider;
})();
//# sourceMappingURL=dynamicPropertiesProvider.js.map

对于AcDocRow:

/**
 * Created by Hassan on 3/16/2016.
 */
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
///<reference path="dynamicPropertiesProvider.ts"/>
var AcDocRow = (function (_super) {
    __extends(AcDocRow, _super);
    function AcDocRow(finYear, docNoTemp, docRow, hsbCod, rowDsc, bedehkar, bestankar, bookmark, mainDocNo, docDate) {
        _super.call(this); //Call Super (Parent) Class Constructor
        this.setup();
        if (finYear != undefined)
            this.FinYear = finYear;
        if (docNoTemp != undefined)
            this.DocNoTemp = docNoTemp;
        if (docRow != undefined)
            this.DocRow = docRow;
        if (hsbCod != undefined)
            this.HsbCod = hsbCod;
        if (rowDsc != undefined)
            this.RowDsc = rowDsc;
        if (bedehkar != undefined)
            this.Bedehkar = bedehkar;
        if (bestankar != undefined)
            this.Bestankar = bestankar;
        if (bookmark != undefined)
            this.Bookmark = bookmark;
        if (mainDocNo != undefined)
            this.MainDocNo = mainDocNo;
        if (docDate != undefined)
            this.DocDate = docDate;
    }
    Object.defineProperty(AcDocRow.prototype, "CompositeKey", {
        //Getters And Setters
        get: function () {
            return this.FinYear + "-" + this.DocNoTemp + "-" + this.DocRow;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(AcDocRow.prototype, "Date", {
        get: function () {
            return ((this.DocDate) ? this.DocDate.substr(0, 4) + "/" + this.DocDate.substr(4, 2) + "/" + this.DocDate.substr(6, 2) : "");
        },
        enumerable: true,
        configurable: true
    });
    AcDocRow.prototype.setup = function () {
        this.FinYear = "";
        this.DocNoTemp = 0;
        this.DocRow = 0;
        this.HsbCod = "";
        this.RowDsc = "";
        this.Bedehkar = 0;
        this.Bestankar = 0;
        this.Bookmark = false;
        this.MainDocNo = 0;
        this.DocDate = "";
    };
    AcDocRow.prototype.copy = function () {
        return new AcDocRow(this.FinYear, this.DocNoTemp, this.DocRow, this.HsbCod, this.RowDsc, this.Bedehkar, this.Bestankar, this.Bookmark, this.MainDocNo, this.DocDate);
    };
    AcDocRow.prototype.resetModel = function (finYear, docNoTemp, docRow, hsbCod, rowDsc, bedehkar, bestankar, bookmark, mainDocNo, docDate) {
        this.constructor(finYear, docNoTemp, docRow, hsbCod, rowDsc, bedehkar, bestankar, bookmark, mainDocNo, docDate);
    };
    return AcDocRow;
})(DynamicPropertiesProvider);
//# sourceMappingURL=acDocRow.js.map

我的ts编译器是WebStrom 11.0的编译器 我也设定了目标es5&#39;标志。

我该怎么办?

enter image description here

enter image description here

编辑到期的iberbeu评论:

我的服务我从服务器读取数据,然后从中创建一个AcDocRow对象

app.factory("AcDocRowService",
    ["$resource",
        function ($resource) {
            //noinspection JSUnusedGlobalSymbols,JSUnusedLocalSymbols
            return $resource("/api/AcDocRows/:id:filter:param1/:param2",
                {
                    id: "@id",
                    param1: "@param1",
                    param2: "@param2",
                    filter: "@filter"
                },
                {
                    "query": {
                        method: "GET",
                        isArray: true,
                        transformResponse: function(data, header) {
                            var wrapped = angular.fromJson(data);
                            //If contains exceptions, it is not a list and should return directly without modification
                            //noinspection JSUnresolvedVariable
                            if (!wrapped.ExceptionType && !wrapped.ExceptionMessage) {
                                angular.forEach(wrapped, function (item, idx) {
                                    wrapped[idx] = new AcDocRow(
                                        wrapped[idx].FinYear,
                                        wrapped[idx].DocNoTemp,
                                        wrapped[idx].DocRow,
                                        wrapped[idx].HsbCod,
                                        wrapped[idx].RowDsc,
                                        wrapped[idx].Bedehkar,
                                        wrapped[idx].Bestankar,
                                        wrapped[idx].Bookmark,
                                        wrapped[idx].MainDocNo,
                                        wrapped[idx].DocDate
                                    );
                                });
                            }
                            return wrapped;
                        }
                    },
                    "get": {
                        method: "GET",
                        isArray: false
                    },
                    "update": {
                        method: "PUT"
                    },
                    "setBookmark":{
                        method: "PUT",
                        params:{
                            param2: "SetBookmark"
                        }
                    }
                }
            );
        }
    ]
);

我的控制器,当我告诉服务返回数据,然后我将它绑定到视图。

app.controller("IndexController", [
    "$rootScope", "$scope", "$uibModal", "$timeout", "AcDocRowService", "FinYearService",
    function ($rootScope, $scope, $uibModal, $timeout, AcDocRowService, FinYearService) {

        $scope.View = {
            SarfaslSelectionDialog: {
                ShowDialog: false,
                /**
                 * Output Result Selected Sarfasl
                 */
                SelectedSarfasl: null,
                FinYear: null,
                InitialHsbCod: null
            },
            CodeInfo: {
                LenCod: 0,
                LenK: 0,
                LenM: 0,
                LenT1: 0,
                LenT2: 0,
                LenJ: 0
            },
            OperationMode: null,
            Errors: [],
            AcDocRowList: [],
            AcDocRowFilters:{
                ShowFilters: false,
                Bookmark: null,
                FromDate: "",
                ToDate: "",
                FromDocNoTemp: null,
                ToDocNoTemp: null,
                FromPrice: null,
                ToPrice: null
            },
            AcDocRowSummery: {
                TotalResult: 0,
                CheckedResult: 0,
                UncheckedResult: 0,
                TotalDemand: 0,
                TotalDept: 0,
                CheckedDemand: 0,
                CheckedDept: 0,
                UncheckedDemand: 0,
                UncheckedDept: 0
            },
            SelectedItems: []
        };

        $scope.Events= {
            selectRow: function(row){
                if($scope.View.SelectedItems.contains(row)){
                    $scope.View.SelectedItems.remove(row);
                } else {
                    $scope.View.SelectedItems.push(row)
                }

                //MY OLD CODES WHERE I READ THE 'row' Object

                //if(! row.dynamicProperties()["selected"])
                //    row.dynamicProperties()["selected"]= true;
                //row.dynamicProperties()["selected"] = !row.dynamicProperties()["selected"];
            },
            ...
            //Where i set AcDocRowList, That i use in my View
            searchAcDocRows: function() {
                $scope.Events.openWaitDialog();

                //If Method Called On Start By $Watch, Return
                if($scope.View.SarfaslSelectionDialog.SelectedSarfasl == null){
                    return;
                }

                var sarfaslParams = $scope.View.SarfaslSelectionDialog;

                var filter = "FinYear=" + sarfaslParams.FinYear + "-HsbCod=" + sarfaslParams.SelectedSarfasl.getClearHsbCod();
                AcDocRowService.query({ filter: filter }).$promise.then(
                    function (data) {
                        $scope.Methods.resetTotals();
                        $scope.View.AcDocRowList = data;
                        $scope.Events.closeWaitDialog();
                    }, function (errorResult) {
                        $scope.View.Errors.push(new Alert("Cannot contact web server at this moment. Please try again later.", AlertType.Danger));
                        $scope.Events.closeWaitDialog();
                    }
                );
            }
            ...
        };
        ...

    }
]);

我的观点:

...
            <tbody>
                <tr data-ng-repeat="row in View.AcDocRowList | filter: Filters.acDocRowFilterFunction"
                    data-ng-class="{'checked-row':row.Bookmark}" data-ng-click="Events.selectRow(row)">
                    <td>
                        <input type="checkbox" ng-model="row.Bookmark" data-ng-click="Events.setBookmark(row)">
                    </td>
                    <td class="number">
                        <!--Restart Total Price-->
                        {{Methods.setTotal($index, row.Bookmark); $index | persianNumberFilter}}
                    </td>
                    <td class="number">{{row.DocNoTemp | persianNumberFilter}}</td>
                    <td>
                        <!--row.Date is a 'getter' -->
                        {{row.Date | persianNumberFilter}}
                    </td>
                    <td>{{row.RowDsc | persianNumberFilter}}</td>
                    <td class="number">{{row.Bedehkar!=0?row.Bedehkar:"" | priceFilter | persianNumberFilter}}</td>
                    <td class="number">{{row.Bestankar!=0?row.Bestankar:"" | priceFilter | persianNumberFilter}}</td>
                    <td>
                        {{Methods.getTashkhis()}}
                    </td>
                    <td class="number">
                        {{Methods.getRemains()!=0?Methods.getRemains():"" | priceFilter | persianNumberFilter}}
                    </td>
                </tr>
            </tbody>
...

解决

AngularJs ngResource没有直接解析transformResponse操作。它将它传递给角度核心中的$ http来处理它。一旦结果出来。它再次折叠Resource类对象内的数据。资源构造函数在命名方法时执行浅拷贝时的情况。而且它的名字说明在更深层次上的很多东西都会丢失,对象类型也会发生变化。

我解决了更新角度ngResource的问题,并提供了新的操作&#34; transformResult&#34;,我使用它而不是transformResponse。 在ngResource将结果传递给用户之前,它会在最后执行它的工作。

https://github.com/deadmann/code.angularjs.org/blob/master/1.4.9/angular-resource.js

我也提出拉动请求,我不这么认为,但我希望他们接受。 https://github.com/angular/code.angularjs.org/pull/35

2 个答案:

答案 0 :(得分:0)

我怀疑你有模块订购问题。我建议不要使用outFile并考虑使用模块模式,例如commonjs:https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

答案 1 :(得分:0)

我修改了ngResource,并发出了一个pull请求,它提供了转换服务的最新结果。 https://github.com/angular/angular.js/pull/14381