ExpressJS / TypeScript-ZoneAwarePromise値を取得できませんか？
更新1開始
問題は、もう一度FormArrayを描画すると、すべての都市と場所を順番に取得できないことです。これはループのためです。とにかく、私はTSの初心者です。再度、感謝します。
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");
}
}
更新1終了
MeanStackでTypeScriptを使用していて、関数がasyncで使用されている
// 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);
});
});
}
必要に応じて、resを返すときに（ "return res;"で）正確な値を取得しています。しかし、rs（私が呼び出す場所）では、次のような値を取得しています。
ZoneAwarePromise {__zone_symbol__state：null、__ zone_symbol__value：Array（0）}
__zone_symbol__valueでは、必要なデータを取得していますが、アクセスすることはできません。私はPromiseオブジェクトを壊していることを知っていますが、getVPDetails（）でthen（）を使用したくない場合にどのように正確に解決できますか
不足しているものを教えてくださいOR必要なデータを取得するにはどうすればよいですか？.
前もって感謝します。
メソッドにasyncを追加すると、alwaysはPromise<T>を返します。ここで、Tは返されるものです。string、void、w/e。
これがasyncの全体的な考え方であり、正しい値を取得する唯一の方法はthenを使用することです。別のasyncを返すので、ここでのPromiseは実際には必要ありませんが、それは重要ではありません:)
型ヒントを使用するのが最善ですが、それ以外の場合はTypeScriptを使用する本当の理由はありません。このようにして、コンパイラーはヒントとエラーを提供し、エラーが通知されます。
getVPDetails("2132").then((rs: PlanInfo) => {
// here you will have your `rs`
});
// Function Definition
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();
}