Fatal编程技术网
  • javascript/
  • Javascript 使用.map从JSON对象初始化TypeScript对象。myclass.myFunction不是函数

Javascript 使用.map从JSON对象初始化TypeScript对象。myclass.myFunction不是函数

javascript angular function typescript rxjs

Javascript 使用.map从JSON对象初始化TypeScript对象。myclass.myFunction不是函数,javascript,angular,function,typescript,rxjs,Javascript,Angular,Function,Typescript,Rxjs,此代码在“row.SetComputedProperties（）；”行的“populateGridRows（）”方法中引发错误。错误消息为–“错误类型错误：row.SetComputedProperties不是函数” 在得到错误之前，我可以在控制台中看到“row”对象上的所有属性（带有数据） 据我所知，这一切都是关于将来自服务器的JSON数据映射到一个类中。请告诉我哪里出了错。谢谢 交付计划.组件.ts import { Component, OnInit, ViewChild, ViewEnc

此代码在“row.SetComputedProperties（）；”行的“populateGridRows（）”方法中引发错误。错误消息为–“错误类型错误：row.SetComputedProperties不是函数”

在得到错误之前，我可以在控制台中看到“row”对象上的所有属性（带有数据）

据我所知，这一切都是关于将来自服务器的JSON数据映射到一个类中。请告诉我哪里出了错。谢谢

交付计划.组件.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { DetailRow, ExcelExportProperties, FilterSettingsModel, Grid, GridComponent, GridLine, PdfExportProperties } from "@syncfusion/ej2-ng-grids";
import { ClickEventArgs } from '@syncfusion/ej2-ng-navigations';
import { UtilService } from "../../../shared/services/util.service";
import { ConditionBasedMaintenanceStatusEnum } from "../../enums";
import { ConditionAssessmentService, IConditionBasedMaintenanceRowModel } from "../../services/conditionassessment.service";
import { DeliveryPlanModel, DeliveryPlanService, IDeliveryPlanModel } from "../../services/delivery-plan.service";

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-delivery-plan',
  templateUrl: './delivery-plan.component.html',
  styleUrls: ['./delivery-plan.component.scss']
})

export class DeliveryplanComponent implements OnInit {
  schoolNumber: number;
  deliveryPlanItems: DeliveryPlanModel[];
  componentVariables: ConditionAssessmentComponentVariables;
  gridRows: Array<DeliveryPlanModel>;
  @ViewChild("deliveryItemsGrid") deliveryItemsGrid: GridComponent;

  progressValue1 = 100;
  progressValue2 = 62;
  clickedYear = null;

  constructor(private route: ActivatedRoute, private svcConditionAssessment: ConditionAssessmentService,
    private svcUtil: UtilService, private deliveryPlanService: DeliveryPlanService) {
    this.componentVariables = new ConditionAssessmentComponentVariables();
    this.gridRows = new Array<DeliveryPlanModel>();
  }

  ngOnInit() {
    this.route.parent.params.subscribe(params => {
      this.schoolNumber = parseInt(params["id"]);
    });  

    Grid.Inject(DetailRow);
    this.getDeliveryPlanItems();
  }

  public getDeliveryPlanItems() {
    this.deliveryPlanService
      .getDeliveryPlanItems(this.schoolNumber.toString()).subscribe(
        data => {
          if (data) {
            this.deliveryPlanItems = data;
            this.populateGridRows();
          }
        }
      )
  }

  public populateGridRows(): void {
        if (this.deliveryPlanItems && this.deliveryPlanItems.length) {
          for (var i = 0; i < this.deliveryPlanItems.length; i++) {
            let row = this.deliveryPlanItems[i];
            console.log(row);
            row.setCompuetedProperties(); // The Error is associated with this line
            this.gridRows.push(row);
          }
        }
      }

import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Router } from '@angular/router';
import { Observable, Operator } from "rxjs";
import { ErrorsService } from "../../shared/services/errors.service";
import { ConditionBasedMaintenanceStatusEnum } from "../enums";

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

export interface IDeliveryPlanModel {
  //Props
  type: string;
  id: number;
  buildingName: string;
  location: string;
  asset: string;
  element: string;
  subElement: string;
  description: string;
  trade: string;
  status: number;
  statusDisplay: string;
  plannedDate: Date;
  completedDate: Date;
  deferred: boolean;
  // methods
  setCompuetedProperties(): void;
}

export class DeliveryPlanModel implements IDeliveryPlanModel {
  //Props
  type: string = null;
  id: number = null;
  buildingName: string = null;
  location: string = null;
  asset: string = null;
  element: string = null;
  subElement: string = null;
  description: string = null;
  trade: string = null;
  status: number = null;
  statusDisplay: string = null;
  plannedDate: Date = null;
  completedDate: Date = null;
  deferred: boolean = null;
  color: string = null;

  // methods
  public setCompuetedProperties(): void {   
    switch (this.status) {
      case ConditionBasedMaintenanceStatusEnum.AddedToPlanner:
        this.statusDisplay = "Planned";
        break;
      case ConditionBasedMaintenanceStatusEnum.Deferred:
        this.statusDisplay = "Deferred";
        break;
      case ConditionBasedMaintenanceStatusEnum.Completed:
        this.statusDisplay = "Completed";
        break;
    }
  }
}

@Injectable()
export class DeliveryPlanService {
  routePrefix: string = "api/deliveryplans";

  constructor(private http: HttpClient, private router: Router, private errorsService: ErrorsService) { }

  public getDeliveryPlanItems(schoolId: string): Observable<DeliveryPlanModel[]> {
    var list = this.http.get<DeliveryPlanModel[]>(this.routePrefix + "/schools/" + schoolId)
      .map<DeliveryPlanModel[], DeliveryPlanModel[]>(items => {
        return items;
      }).catch(error => this.errorsService.handleError(error));
    return list;
  }
}

从“@angular/core”导入{Component，OnInit，ViewChild，viewenclosuration}；
从“@angular/router”导入{ActivatedRoute}”；
从“@syncfusion/ej2 ng grids”导入{DetailRow、ExcelExportProperties、FilterSettingsModel、Grid、GridComponent、GridLine、PdfExportProperties}；
从“@syncfusion/ej2 ng导航”导入{ClickEventArgs}；
从“../../../shared/services/util.service”导入{UtilService}”；
从“../../enums”导入{ConditionBasedMaintenance StatusEnum}；
从“../../services/conditionassessment.service”导入{conditionassessment服务，IConditionbasedMaintenance RowModel}”；
从“../../services/deliveryplan.service”导入{DeliveryPlanModel，DeliveryPlanService，IDeliveryPlanModel}”；
@组成部分({
封装：视图封装。无，
选择器：“应用程序交付计划”，
templateUrl:“./delivery plan.component.html”，
样式URL:['./delivery plan.component.scss']
})
导出类DeliveryplanComponent实现OnInit{
学号：学号；
deliveryPlanItems:DeliveryPlanModel[]；
组件变量：条件评估组件变量；
网格行：数组；
@ViewChild（“deliveryItemsGrid”）deliveryItemsGrid:GridComponent；
progressValue1=100；
progressValue2=62；
clickedYear=null；
构造函数（专用路由：ActivatedRoute，专用SVC ConditionAssessment:ConditionAssessment服务，
专用svcUtil:UtilService，专用deliveryPlanService:deliveryPlanService）{
this.componentVariables=新的条件评估componentVariables（）；
this.gridRows=新数组（）；
}
恩戈尼尼特（）{
this.route.parent.params.subscribe（params=>{
this.schoolNumber=parseInt（参数[“id”]）；
});  
网格注入（DetailRow）；
此参数为.getDeliveryPlanItems（）；
}
公共getDeliveryPlanItems（）{
这是deliveryPlanService
.getDeliveryPlanItems（此.schoolNumber.toString（））.subscribe(
数据=>{
如果（数据）{
this.deliveryPlanItems=数据；
this.populateGridRows（）；
}
}
)
}
public populateGridRows（）：void{
if（this.deliveryPlanItems&&this.deliveryPlanItems.length）{
对于（变量i=0；i
交付计划.service.ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { DetailRow, ExcelExportProperties, FilterSettingsModel, Grid, GridComponent, GridLine, PdfExportProperties } from "@syncfusion/ej2-ng-grids";
import { ClickEventArgs } from '@syncfusion/ej2-ng-navigations';
import { UtilService } from "../../../shared/services/util.service";
import { ConditionBasedMaintenanceStatusEnum } from "../../enums";
import { ConditionAssessmentService, IConditionBasedMaintenanceRowModel } from "../../services/conditionassessment.service";
import { DeliveryPlanModel, DeliveryPlanService, IDeliveryPlanModel } from "../../services/delivery-plan.service";

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'app-delivery-plan',
  templateUrl: './delivery-plan.component.html',
  styleUrls: ['./delivery-plan.component.scss']
})

export class DeliveryplanComponent implements OnInit {
  schoolNumber: number;
  deliveryPlanItems: DeliveryPlanModel[];
  componentVariables: ConditionAssessmentComponentVariables;
  gridRows: Array<DeliveryPlanModel>;
  @ViewChild("deliveryItemsGrid") deliveryItemsGrid: GridComponent;

  progressValue1 = 100;
  progressValue2 = 62;
  clickedYear = null;

  constructor(private route: ActivatedRoute, private svcConditionAssessment: ConditionAssessmentService,
    private svcUtil: UtilService, private deliveryPlanService: DeliveryPlanService) {
    this.componentVariables = new ConditionAssessmentComponentVariables();
    this.gridRows = new Array<DeliveryPlanModel>();
  }

  ngOnInit() {
    this.route.parent.params.subscribe(params => {
      this.schoolNumber = parseInt(params["id"]);
    });  

    Grid.Inject(DetailRow);
    this.getDeliveryPlanItems();
  }

  public getDeliveryPlanItems() {
    this.deliveryPlanService
      .getDeliveryPlanItems(this.schoolNumber.toString()).subscribe(
        data => {
          if (data) {
            this.deliveryPlanItems = data;
            this.populateGridRows();
          }
        }
      )
  }

  public populateGridRows(): void {
        if (this.deliveryPlanItems && this.deliveryPlanItems.length) {
          for (var i = 0; i < this.deliveryPlanItems.length; i++) {
            let row = this.deliveryPlanItems[i];
            console.log(row);
            row.setCompuetedProperties(); // The Error is associated with this line
            this.gridRows.push(row);
          }
        }
      }

import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Router } from '@angular/router';
import { Observable, Operator } from "rxjs";
import { ErrorsService } from "../../shared/services/errors.service";
import { ConditionBasedMaintenanceStatusEnum } from "../enums";

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
};

export interface IDeliveryPlanModel {
  //Props
  type: string;
  id: number;
  buildingName: string;
  location: string;
  asset: string;
  element: string;
  subElement: string;
  description: string;
  trade: string;
  status: number;
  statusDisplay: string;
  plannedDate: Date;
  completedDate: Date;
  deferred: boolean;
  // methods
  setCompuetedProperties(): void;
}

export class DeliveryPlanModel implements IDeliveryPlanModel {
  //Props
  type: string = null;
  id: number = null;
  buildingName: string = null;
  location: string = null;
  asset: string = null;
  element: string = null;
  subElement: string = null;
  description: string = null;
  trade: string = null;
  status: number = null;
  statusDisplay: string = null;
  plannedDate: Date = null;
  completedDate: Date = null;
  deferred: boolean = null;
  color: string = null;

  // methods
  public setCompuetedProperties(): void {   
    switch (this.status) {
      case ConditionBasedMaintenanceStatusEnum.AddedToPlanner:
        this.statusDisplay = "Planned";
        break;
      case ConditionBasedMaintenanceStatusEnum.Deferred:
        this.statusDisplay = "Deferred";
        break;
      case ConditionBasedMaintenanceStatusEnum.Completed:
        this.statusDisplay = "Completed";
        break;
    }
  }
}

@Injectable()
export class DeliveryPlanService {
  routePrefix: string = "api/deliveryplans";

  constructor(private http: HttpClient, private router: Router, private errorsService: ErrorsService) { }

  public getDeliveryPlanItems(schoolId: string): Observable<DeliveryPlanModel[]> {
    var list = this.http.get<DeliveryPlanModel[]>(this.routePrefix + "/schools/" + schoolId)
      .map<DeliveryPlanModel[], DeliveryPlanModel[]>(items => {
        return items;
      }).catch(error => this.errorsService.handleError(error));
    return list;
  }
}

import{HttpClient，HttpHeaders，HttpParams}来自“@angular/common/http”；
从“@angular/core”导入{Injectable}”；
从'@angular/Router'导入{Router}；
从“rxjs”导入{Observable，Operator}；
从“../../shared/services/errors.service”导入{ErrorsService}；
从“./enum”导入{ConditionBasedMaintenance StatusEnum}；
常量httpOptions={
标题：新的HttpHeaders({
“内容类型”：“应用程序/json”
})
};
导出接口IDeliveryPlanModel{
//道具
类型：字符串；
id：编号；
buildingName:string；
位置：字符串；
资产：字符串；
元素：字符串；
子元素：字符串；
描述：字符串；
行业：弦；
状态：编号；
状态显示：字符串；
计划日期：日期；
完成日期：日期；
延迟：布尔值；
//方法
setComputedProperties（）：void；
}
导出类DeliveryPlanModel实现IDeliveryPlanModel{
//道具
类型：string=null；
id:number=null；
buildingName:string=null；
位置：string=null；
资产：string=null；
元素：string=null；
子元素：string=null；
description:string=null；
trade:string=null；
状态：number=null；
statusDisplay:string=null；
plannedDate:日期=null；
completedDate:日期=null；
延迟：布尔值=null；
颜色：string=null；
//方法
public setComputedProperties（）：void{
开关（此状态）{
基于案例条件的维护状态Enum.AddedToPlanner：
this.statusDisplay=“已计划”；
打破
案例条件基维护状态枚举延迟：
this.statusDisplay=“延迟”；
打破
案例条件基维护状态枚举。已完成：
this.statusDisplay=“已完成”；
打破
}
}
}
@可注射（）
导出类DeliveryPlanService{
routePrefix:string=“api/deliveryplans”；
构造函数（专用http:HttpClient，专用路由器：路由器，专用错误服务：错误服务）{}
public getDeliveryPlanItems（schoolId:string）：可观察{
var list=this.http.get（this.routePrefix+“/schools/”+schoolId）
.map（项目=>{
退货项目；
}).catch（error=>this.errorsService.handleError（error））；
退货清单；
}
}
@MattMcCutchen的可能重复项：谢谢您指出。您对此有何看法？我是删除我的问题还是保持原样？我对政策不太熟悉，但基于此，我建议不要删除该问题，而是接受将其作为重复项关闭的选项。