angular - ExpressJS/Typescript - Kan inte hämta ZoneAwarePromise-värde?
UPPDATERING 1 STARTAR
Problemet är att jag inte kan få alla städer och platser i ordning när jag ritar FormArray igen och detta beror enbart på loopen. Hur som helst, jag är ny på TS, du kanske förstår mycket bättre. Tack igen.
import { Component, OnInit, NgZone } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, FormArray, Validators, FormControl } from '@angular/forms';
import { CustomValidators } from 'ng2-validation';
import { SharedService } from '../../../layouts/shared-service';
import { MdSnackBar, MdSnackBarConfig, MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
// Added employee services
import { VehiclePlanService } from '../../../service/vehicle-plan.service';
import { PlanService } from '../../../service/plan.service';
import { LocationService } from '../../../service/location.service';
import { VehicleMakeService } from '../../../service/vehicle-make.service';
import { CommonService } from '../../../service/common.service'; // call the common services
import { PlanInterface } from './plans.interface';
import 'rxjs/add/operator/toPromise';
declare var $: any;
@Component({
selector: 'app-vehicle-plan',
templateUrl: './vehicle-plan.component.html',
styleUrls: ['./vehicle-plan.component.scss']
})
export class VehiclePlanComponent implements OnInit {
pageTitle: "Vehicle Plan";
_id : string = this.route.snapshot.params['id'];
public form: FormGroup;
plansElement = {}; sessionData = {}; activePlans = {}; activeMake = {}; loc = {}; city = {}; locationNames = {};
activePlanKey = []; activeMakeKey = []; locKey = []; cityKey = []; value = []; planVals = [];
securityDeposit : string ; fuleLevel : string; bookinH : string; bookingCycle : string; freeKm : string; grace : string; resVP: string;
planDetails: string; vehicleDetails: string; vehicleID: string; planID: string;
planName: string ; makeName : string;
constructor( private fb: FormBuilder,
private _sharedService: SharedService,
private router: Router,
private route: ActivatedRoute,
public snackBar: MdSnackBar,
public dialog: MdDialog,
private vpService: VehiclePlanService,
private plan: PlanService,
private locationService: LocationService,
private vmService: VehicleMakeService,
private commonService : CommonService
) {
this._sharedService.emitChange(this.pageTitle);
this.commonService.getSession().then((res) => {
this.sessionData = res['data'];
});
}
ngOnInit() {
this.getActivePlans();
this.getActiveVehicleMake();
this.getCityForPlan();
this.getLocForPlan();
this.planName= '' ; this.makeName = '';
this.form = this.fb.group({
plan_name: [null, Validators.required],
vehicle_make: [null, Validators.required],
rate_per_additional_km: [null, Validators.required],
rate_per_plan: [null, Validators.required],
planArray: this.fb.array([
this.initPlans([]),
])
})
}
// Operate vehiclemake to add / edit
actionVP(model: PlanInterface) {
let formData = model["value"];
var pa = model["value"].planArray;
for(let i=0; i<pa.length;i++) {
if(pa[i].location_name != null) {
let vp = {
'vehicle_make': [{
"id" : formData.vehicle_make,
"make_name" : this.vehicleDetails
}],
'plan_name': [{
"id" : formData.plan_name,
"plan_name" : this.planDetails
}],
'location': [{
"id" : "1",
"location_name" : pa[i].location_name,
"city" : pa[i].city,
"lat" : "0.00",
"long" : "0.00"
}],
'plan_rate': (pa[i].rate_plan != null) ? pa[i].rate_plan : formData.rate_per_plan,
'total_free_km': (pa[i].total_free_km != null) ? pa[i].total_free_km : this.freeKm,
'additional_km_charges': (pa[i].additional_km_charges != null) ? pa[i].additional_km_charges : formData.rate_per_additional_km,
'minimum_hours': (pa[i].minimum_hours != null) ? pa[i].minimum_hours : this.bookinH,
'booking_cycle': (pa[i].booking_cycle != null) ? pa[i].booking_cycle : this.bookingCycle,
'rate_fuel_level': (pa[i].rate_fuel_level != null) ? pa[i].rate_fuel_level : this.fuleLevel,
'grace_period': (pa[i].grace_period != null) ? pa[i].grace_period : this.grace,
'security_deposit': (pa[i].security_deposit != null) ? pa[i].security_deposit : this.securityDeposit,
"organization" : [{
"id" : "1",
"name" : "Driven"
}],
'modified_date': new Date()
};
// SAVE DATA START
if(this.route.snapshot.params['id']) {
this.updateVP(this.route.snapshot.params['id'], vp);
} else {
this.saveVP(vp);
}
// SAVE DATA END
}
}
}
// Insert data to vehiclemake
saveVP(vp) {
// Build data JSON
vp['created_date'] = new Date();
this.vpService.saveVehiclePlan(vp).then((result) => {
let id = result['data']['_id'];
this.openSnackBar("Saved vehicle plan successfully", "");
this.router.navigate(['/driven/vehicle-plan']);
}, (err) => {
this.openSnackBar("Something went wrong! vehicle plan not saved", "");
console.log(err);
});
}
// Update vehiclemake details
updateVP(id, vp) {
this.vpService.updateVehiclePlan(id, vp).then((result) => {
let id = result['data']['_id'];
this.openSnackBar("Updated vehicle plan successfully", "");
this.router.navigate(['/driven/vehicle-plan']);
}, (err) => {
this.openSnackBar("Something went wrong! vehicle plan not updated", "");
console.log(err);
});
}
// Get the all active plans
getActivePlans() {
this.plan.getActivePlans().then((res) => {
if(res['status'] == 'success'){
this.activePlans = res['data'];
this.activePlanKey = Object.keys(this.activePlans);
}else{
this.openSnackBar(res['data']['message'], "");
}
}, (err) => {
console.log(err);
});
}
// Get the all active plans
getActiveVehicleMake() {
this.vmService.getActiveVehicleMake().then((res) => {
if(res['status'] == 'success'){
this.activeMake = res['data'];
this.activeMakeKey = Object.keys(this.activeMake);
}else{
this.openSnackBar(res['data']['message'], "");
}
}, (err) => {
console.log(err);
});
}
// Get the all Locations for plans gruped by city
getCityForPlan() {
this.locationService.getCityForPlan().then((res) => {
if(res['status'] == 'success'){
this.city = res['data'];
this.cityKey = Object.keys(this.city);
}else{
this.openSnackBar(res['data']['message'], "");
}
}, (err) => {
console.log(err);
});
}
async getLocForPlan() {
let res = await this.locationService.getLocForPlan();
if(res['status'] == 'success') {
this.loc = res['data'];
this.locKey = Object.keys(this.loc);
this.addEditValues();
} else {
this.openSnackBar(res['data']['message'], "");
}
}
// used to display the alert message
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
});
}
initPlans(planVals) {
//console.log(planVals);
return this.fb.group({
city_name: [planVals['city_name']],
city : [planVals['city']],
is_active: [planVals['is_active']],
location_name: [planVals['location_name']],
rate_plan: [planVals['rate_plan']],
total_free_km: [planVals['total_free_km']],
additional_km_charges: [planVals['additional_km_charges']],
minimum_hours: [planVals['minimum_hours']],
booking_cycle: [planVals['booking_cycle']],
rate_fuel_level: [planVals['rate_fuel_level']],
grace_period: [planVals['grace_period']],
security_deposit: [planVals['security_deposit']]
});
}
addEditValues() {
let len = this.locKey.length;
const control = <FormArray>this.form.controls['planArray'];
if(len) { control.removeAt(0); }
for(let i=0;i<len;i++) {
// DEFAULT NULL
this.planVals['city'] = null;
this.planVals['location_name'] = null;
this.planVals['is_active'] = null;
this.planVals['rate_plan'] = null;
this.planVals['total_free_km'] = null;
this.planVals['additional_km_charges'] = null;
this.planVals['minimum_hours'] = null;
this.planVals['booking_cycle'] = null;
this.planVals['rate_fuel_level'] = null;
this.planVals['grace_period'] = null;
this.planVals['security_deposit'] = null;
// DEFAULT NULL
this.planVals['city_name'] = this.loc[i]._id[0];
let lenInner = this.loc[i].locations.length;
for(let k=0;k<lenInner;k++) {
if(this.loc[i].locations[k].is_active) {
// UPDATED DATA FROM DB
if(this.planID && this.vehicleID) {
this.planVals['city'] = this.loc[i].locations[k].city[0];
this.planVals['location_name'] = this.loc[i].locations[k].location_name;
this.getVPDetails(this.planID,this.vehicleID,this.planVals['location_name'],this.planVals['city']).then((res: any) => {
console.log(res);
if(res['status'] == 'success') {
if(k==0) {
this.planVals['city_name'] = this.loc[i]._id[0];
control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
}
// FROM DB
this.planVals['rate_plan'] = res['data'][0]['plan_rate'];
this.planVals['total_free_km'] = res['data'][0]['total_free_km'];
this.planVals['additional_km_charges'] = res['data'][0]['additional_km_charges'];
this.planVals['minimum_hours'] = res['data'][0]['minimum_hours'];
this.planVals['booking_cycle'] = res['data'][0]['booking_cycle'];
this.planVals['rate_fuel_level'] = res['data'][0]['rate_fuel_level'];
this.planVals['grace_period'] = res['data'][0]['grace_period'];
this.planVals['security_deposit'] = res['data'][0]['security_deposit'];
// FROM DB
this.planVals['city_name'] = null;
this.planVals['is_active'] = this.loc[i].locations[k].is_active;
this.planVals['city'] = this.loc[i].locations[k].city[0];
this.planVals['location_name'] = this.loc[i].locations[k].location_name;
control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
} else {
if(k==0) {
this.planVals['city_name'] = this.loc[i]._id[0];
control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
}
// BLANK DATA AT FIRST
this.planVals['rate_plan'] = null;
this.planVals['total_free_km'] = null;
this.planVals['additional_km_charges'] = null;
this.planVals['minimum_hours'] = null;
this.planVals['booking_cycle'] = null;
this.planVals['rate_fuel_level'] = null;
this.planVals['grace_period'] = null;
this.planVals['security_deposit'] = null;
// BLANK DATA AT FIRST
this.planVals['city_name'] = null;
this.planVals['city'] = this.loc[i].locations[k].city[0];
this.planVals['is_active'] = this.loc[i].locations[k].is_active;
this.planVals['location_name'] = this.loc[i].locations[k].location_name;
control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
}
});
} else {
if(k==0) {
this.planVals['city_name'] = this.loc[i]._id[0];
control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
}
// BLANK DATA AT FIRST
this.planVals['rate_plan'] = null;
this.planVals['total_free_km'] = null;
this.planVals['additional_km_charges'] = null;
this.planVals['minimum_hours'] = null;
this.planVals['booking_cycle'] = null;
this.planVals['rate_fuel_level'] = null;
this.planVals['grace_period'] = null;
this.planVals['security_deposit'] = null;
// BLANK DATA AT FIRST
this.planVals['city_name'] = null;
this.planVals['city'] = this.loc[i].locations[k].city[0];
this.planVals['is_active'] = this.loc[i].locations[k].is_active;
this.planVals['location_name'] = this.loc[i].locations[k].location_name;
control.push(this.initPlans(this.planVals)); //#### PUSH INTO FORMARRAY ####
}
}
}
}
}
removeFormArray() {
this.planVals = [];
const control = <FormArray>this.form.controls['planArray'];
for (var i = control.length - 1; i > 0; i--) {
this.removeInput(i);
}
}
removeInput(i: number) {
const control = <FormArray>this.form.controls['planArray'];
control.removeAt(i);
}
async getVPDetails(pid, vid, locname, cityname): Promise<any> {
return await this.vpService.getVehiclePlansInfo({plan_id: pid, make_id: vid, loc: locname, city: cityname});
}
// used to populate the default security deposit & fule level
selectVM(value){
this.vmService.showVehicleMake(value['value']).then((res) => {
this.securityDeposit = res['data']['base_security_deposit'];
this.fuleLevel = res['data']['rate_per_fuel_level'];
this.makeName = value['value'];
this.vehicleID = res['data']['_id'];
this.vehicleDetails = res['data']['brand_name'] + ' ' + res['data']['make_name'] + ' ' + res['data']['model_name'];
this.getVehiclePlan();
return false;
}, (err) => {
console.log(err);
});
}
// used to prepopulate the default value min booking h, h/ booking cycle, free km, grace time
//bookinH : string; bookingCycle : string; freeKm : string; grace : string;
selectPlan(value) {
this.plan.getPlansInfo(value['value']).then((res) => {
this.bookinH = res['data']['min_booking_hours'];
this.bookingCycle = res['data']['hours_per_booking_cycle'];
this.freeKm = res['data']['free_km_per_booking_cycle'];
this.grace = res['data']['grace_period_in_hours'];
this.planName = value['value'];
this.planDetails = res['data']['plan_name'];
this.planID = res['data']['_id'];
this.getVehiclePlan();
return false;
}, (err) => {
console.log(err);
});
}
// get the all plans on change of plans and vehicle make
getVehiclePlan(){
if(this.planName != '' && this.makeName != '' ) {
//const control = <FormArray>this.form.controls['planArray'];
//control.controls = [];
this.removeFormArray();
this.addEditValues();
}
}
// update the plan screen with default values
updateDefaultValue(){
var rate_plan = $('.rate_per_plan').val(); var additional_km_charges = $('.rate_per_additional_km').val();
var security_deposit = this.securityDeposit; var grace_period = this.grace;
var rate_fuel_level = this.fuleLevel; var booking_cycle = this.bookingCycle;
var minimum_hours = this.bookinH; var total_free_km = this.freeKm;
$('.security_deposit, .grace_period, .rate_fuel_level, .booking_cycle, .minimum_hours, .additional_km_charges, .total_free_km, .rate_plan').each(function(){
$('.security_deposit').val(security_deposit);
$('.grace_period').val(grace_period);
$('.rate_fuel_level').val(rate_fuel_level);
$('.booking_cycle').val(booking_cycle);
$('.minimum_hours').val(minimum_hours);
$('.additional_km_charges').val(additional_km_charges);
$('.total_free_km').val(total_free_km);
$('.rate_plan').val(rate_plan);
});
return false;
}
checkAllLoc(value){
var val = $('#'+value).val();
if(val == "true"){
$('.'+value).prop('checked', true);
$('#'+value).val("false");
} else {
$('.'+value).prop('checked', false);
$('#'+value).val("true");
}
}
uncheckParent(value){
$('#'+value).prop('checked', false);
$('#'+value).val("true");
}
}
UPPDATERING 1 SLUT
Jag använder TypeScript i MeanStack och använder en funktion med async eftersom det inte fungerade i sekventiell ordning
// Calling Function (In Main.ts file)
let rs = getVPDetails("2132");
// Function Definition (In Main.ts file)
async getVPDetails(pid) {
let res = await this.vpService.getPlansInfo({plan_id: pid});
return res;
}
// Middle Ware (IN service.ts file)
getPlansInfo(data) {
return new Promise((resolve, reject) => {
this.http.post('/vehicle-plan/plan-info', data)
.map(res => res.json())
.subscribe(res => {
resolve(res);
}, (err) => {
reject(err);
});
});
}
Jag får exakt värde när jag returnerar res (i "return res;") som jag behöver. Men i rs (där jag anropar), får jag ett värde som detta:
ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
I __zone_symbol__value har jag mina data som jag behöver men på inget sätt kan jag få åtkomst till dem. Jag vet att jag bryter Promise-objektet men hur kan jag lösa det exakt när jag inte vill använda then() i getVPDetails();
Vänligen låt mig veta vad jag saknar ELLER hur jag kan få de uppgifter jag behöver.
Tack i förväg.
Svar #1
När du lägger till async till en metod kommer den alltid att returnera en Promise<T>. Där T är vad som helst du returnerar, string, void, eller vad som helst.
Det är hela idén med async, och det enda sättet att få rätt värde är att använda then. Din async här är egentligen inte nödvändig, eftersom du returnerar ett annat Promise, men det är inte poängen :)
Det bästa är att använda typindikeringar, annars finns det egentligen ingen anledning att använda TypeScript. På detta sätt ger kompilatorn dig ledtrådarna och felen, och du skulle ha blivit meddelad om ditt fel:
getVPDetails("2132").then((rs: PlanInfo) => {
// here you will have your `rs`
});
// Function Definition (using async/await as demonstration)
async getVPDetails(pid): Promise<PlanInfo> {
return await this.vpService.getPlansInfo({plan_id: pid});
}
// Middle Ware
getPlansInfo(data): Promise<PlanInfo> {
return this.http.post('/vehicle-plan/plan-info', data)
.map(res => res.json())
.toPromise();
}