在其他组件Angular 6中获得价值
你好，当我从不同的组件获取价值时，我会遇到问题。
流是我有2个不同的组件，第一个组件是ReceiveBookingManageComponent，第二个是DriverTablePickerComponent。
问题出在DriverTablePickerComponent中，但是在ReceiveBookingManageComponent中，我有一个可以通过管理员接收预订的表单，问题出在“选择类型请求预订”中，我有2种选择的预订车辆或带有凭证运输的预订。当我选择车辆时，显示2台车辆和驾驶员。问题出在驱动程序表中，我有用于按期预订来获取驱动程序的服务，该服务用于验证已在使用的日期中预订了驱动程序，但是我在DriverTablePickerComponent中获得了价值。
这是我的代码receivebookingManage.component.ts
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import { NotificationService } from '../../../../component/notification/notification.service';
import { ReceiveBookingService } from './receive-booking.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DateConverter } from '../../../../@shared/date.converter';
import { BookingVehicleModel } from '../../../../@model/booking-vehicle.model';
import { EmployeeService } from '../../../../@shared/employee.service';
import { AppConfig } from '../../../../@core/app.config';
import { EmployeeMemberService } from '../../../master/component/employee-member/employee-member.service';
import { OperationalVehicleModel } from '../../../../@model/operational-vehicle.model';
import { OperationalVehicleService } from '../../../master/component/operational-vehicle/operational-vehicle.service';
import { VoucherModel } from '../../../../@model/voucher.model';
import { DataTable, DataTableResource } from 'angular5-data-table';
import { DatePipe } from '@angular/common';
import { DriverModel } from '../../../../@model/driver.model';
import { DriverTablePickerComponent } from '../../../master/component/driver/driver-table-picker.component';
import { VoucherTablePickerComponent } from '../../../master/component/voucher/voucher-table-picker.component';
import { PdfmakeService } from 'ng-pdf-make';
@Component({
selector: 'receive-booking-manage',
templateUrl: 'receive-booking-manage.component.html',
})
export class ReceiveBookingManageComponent implements OnInit {
@Output() routeBack: EventEmitter<Boolean> = new EventEmitter<Boolean>();
@Input() bookingvehicle: BookingVehicleModel;
// Datatable resource
itemResourceDriver: any;
itemResourceVoucher: any;
itemResourceVehicle: any;
itemsVehicle = [];
itemsDriver = [];
itemsVoucher = [];
itemCountDriver = 0;
itemCountVoucher = 0;
itemCountVehicle = 0;
params = { offset: 0, limit: 100 };
@ViewChild(DataTable) dataTable: DataTable;
@ViewChild(DriverTablePickerComponent) driverPicker: DriverTablePickerComponent;
@ViewChild(VoucherTablePickerComponent) voucherPicker: VoucherTablePickerComponent;
public title: string;
private config: any = null;
public vehicles: OperationalVehicleModel;
public vehicleGroups: OperationalVehicleModel[] = [];
public drivers: DriverModel[] = [];
public employee: EmployeeMemberService;
public vouchers: VoucherModel;
public isReadOnly: boolean = true;
public bookingvehicleForm: FormGroup;
public tampung: any;
public tampung2: any;
public tampung3: any;
public page: number;
public employeeid: any;
public passenger: any;
public pasenggers: number;
public showVehicle: boolean = true;
public isShowDriver: boolean = false;
public isShowVoucher: boolean = false;
public showVoucher: boolean = true;
public loading_btn: boolean = false;
public totalItem: number = 0;
public time1 = Date;
public time2 = Date;
constructor(
private notification: NotificationService,
private app_config: AppConfig,
private receivebookingService: ReceiveBookingService,
private employeeService: EmployeeService,
private vehicleService: OperationalVehicleService,
private employeeMemberService: EmployeeMemberService,
private fb: FormBuilder,
private dateconverter: DateConverter,
private datePipe: DatePipe,
private pdfmake: PdfmakeService
) {
this.config = this.app_config.get();
this.passenger = this.config.Passenger.Passengers;
this.pasenggers = this.passenger[0];
}
// Initialize for Add or Edit
public ngOnInit(): void {
if (this.bookingvehicle.id === 0) {
this.title = 'Add Booking Vehicle';
this.isReadOnly = false;
}
else {
this.title = 'Edit Booking Vehicle';
}
this.getData();
this.buildForm();
}
// Set form error
public formErrors = {
'employee': '',
'name': '',
'functionName': '',
'startPeriodeBooking': '',
'endPeriodeBooking': '',
'destination': '',
'passenger': '',
'reason': '',
'driveMode': '',
'startHoursOfDeparture': '',
'endHoursOfDeparture': '',
};
// Validation Function to show error messaggess
public validationMessages = {
'employee': {
'required': 'EmployeeNumber is required.',
},
'name': {
'required': 'Name is required'
},
'functionName': {
'required': 'Function is required.',
},
'startPeriodeBooking': {
'required': 'Start Date is required.',
},
'endPeriodeBooking': {
'required': 'End Date is required.',
},
'destination': {
'required': 'Destination is required.',
},
'passenger': {
'required': 'Passenger is required.',
},
'reason': {
'required': 'Reason is required.',
},
'driveMode': {
'required': 'Service is required.',
},
'startHoursOfDeparture': {
'required': 'Start Time is required.',
},
'endHoursOfDeparture': {
'required': 'End Time is required.',
},
};
// Set variable form
private buildForm(): void {
let bookingDate: any;
let startPeriodeBooking: any = this.dateconverter.DateToDTP(new Date(this.bookingvehicle.startPeriodeBooking));
let endPeriodeBooking: any = this.dateconverter.DateToDTP(new Date(this.bookingvehicle.endPeriodeBooking));
this.time1 = this.dateconverter.TimeToTP(new Date(this.bookingvehicle.startHoursOfDeparture));
this.time2 = this.dateconverter.TimeToTP(new Date(this.bookingvehicle.endHoursOfDeparture));
if (this.bookingvehicle.bookingDate != null) {
bookingDate = this.dateconverter.DateToDTP(new Date(this.bookingvehicle.bookingDate));
}
else {
bookingDate = this.dateconverter.DateToDTP(new Date());
}
this.bookingvehicleForm = this.fb.group({
'id': [this.bookingvehicle.id],
'employee': [this.bookingvehicle.employeeNumber, Validators.compose([Validators.required, Validators.maxLength(55)])],
'name': [this.bookingvehicle.employeeName, Validators.compose([Validators.required, Validators.maxLength(30)])],
'functionName': [this.bookingvehicle.employeeFunction, Validators.compose([Validators.required, Validators.maxLength(50)])],
'bookingDate': [bookingDate, Validators.compose([Validators.required, Validators.maxLength(30)])],
'startPeriodeBooking': [startPeriodeBooking, Validators.compose([Validators.required, Validators.maxLength(20)])],
'endPeriodeBooking': [endPeriodeBooking, Validators.compose([Validators.required, Validators.maxLength(20)])],
'destination': [this.bookingvehicle.destination, Validators.compose([Validators.required, Validators.maxLength(30)])],
'passenger': [this.bookingvehicle.passenger],
'reason': [this.bookingvehicle.reason, Validators.compose([Validators.required, Validators.maxLength(50)])],
'driveMode': [this.bookingvehicle.driveMode, Validators.compose([Validators.required, Validators.maxLength(20)])],
'startHoursOfDeparture': [this.time1],
'endHoursOfDeparture': [this.time2],
'typeRequest': [this.bookingvehicle.typeRequest]
});
};
// Create & Save Function
public onSave(): void {
const bookingvehicle = new BookingVehicleModel();
let driver = new DriverModel();
let vouchers = new VoucherModel();
let operationalvehicles = new OperationalVehicleModel();
if (this.bookingvehicleForm.controls['typeRequest'].value == 1) {
if (this.bookingvehicleForm.controls['driveMode'].value == 0) {
operationalvehicles = this.dataTable.selectedRow.item;
driver = this.driverPicker.dataTable.selectedRow.item;
vouchers.code = "a";
bookingvehicle.id = this.bookingvehicleForm.controls['id'].value;
bookingvehicle.employee = this.tampung;
bookingvehicle.passenger = this.bookingvehicleForm.controls['passenger'].value;
bookingvehicle.driveMode = this.bookingvehicleForm.controls['driveMode'].value;
bookingvehicle.bookingDate = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['bookingDate'].value);
bookingvehicle.startPeriodeBooking = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['startPeriodeBooking'].value);
bookingvehicle.endPeriodeBooking = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['endPeriodeBooking'].value);
bookingvehicle.startHoursOfDeparture = this.bookingvehicle.startHoursOfDeparture;
bookingvehicle.endHoursOfDeparture = this.bookingvehicle.endHoursOfDeparture;
bookingvehicle.destination = this.bookingvehicleForm.controls['destination'].value;
bookingvehicle.reason = this.bookingvehicleForm.controls['reason'].value;
bookingvehicle.typeRequest = this.bookingvehicleForm.controls['typeRequest'].value;
bookingvehicle.vehicle = operationalvehicles;
bookingvehicle.driver = driver;
bookingvehicle.isActive = this.bookingvehicle.isActive;
bookingvehicle.voucher = null;
bookingvehicle.approvalByLeaderAdmin = 2;
bookingvehicle.approvalByLeaderEmployee = this.bookingvehicle.approvalByLeaderEmployee;
}
else if (this.bookingvehicleForm.controls['driveMode'].value == 1) {
operationalvehicles = this.dataTable.selectedRow.item;
vouchers.code = "a";
bookingvehicle.id = this.bookingvehicleForm.controls['id'].value;
bookingvehicle.employee = this.tampung;
bookingvehicle.passenger = this.bookingvehicleForm.controls['passenger'].value;
bookingvehicle.driveMode = this.bookingvehicleForm.controls['driveMode'].value;
bookingvehicle.bookingDate = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['bookingDate'].value);
bookingvehicle.startPeriodeBooking = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['startPeriodeBooking'].value);
bookingvehicle.endPeriodeBooking = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['endPeriodeBooking'].value);
bookingvehicle.startHoursOfDeparture = this.bookingvehicle.startHoursOfDeparture;
bookingvehicle.endHoursOfDeparture = this.bookingvehicle.endHoursOfDeparture;
bookingvehicle.destination = this.bookingvehicleForm.controls['destination'].value;
bookingvehicle.reason = this.bookingvehicleForm.controls['reason'].value;
bookingvehicle.typeRequest = this.bookingvehicleForm.controls['typeRequest'].value;
bookingvehicle.vehicle = operationalvehicles;
bookingvehicle.driver = null;
bookingvehicle.voucher = null;
bookingvehicle.isActive = this.bookingvehicle.isActive;
bookingvehicle.approvalByLeaderAdmin = 2;
bookingvehicle.approvalByLeaderEmployee = this.bookingvehicle.approvalByLeaderEmployee;
}
}
else if (this.bookingvehicleForm.controls['typeRequest'].value == 2) {
vouchers = this.voucherPicker.dataTable.selectedRow.item;
vouchers.status = 1;
operationalvehicles.chassisNumber = "a";
operationalvehicles.machineNumber = "a";
operationalvehicles.type = "a";
operationalvehicles.color = "a";
operationalvehicles.bpkbNumber = "a";
operationalvehicles.licenseNumber = "a";
operationalvehicles.chassisNumber = "a";
operationalvehicles.brand.name = "a";
bookingvehicle.id = this.bookingvehicleForm.controls['id'].value;
bookingvehicle.employee = this.tampung;
bookingvehicle.passenger = this.bookingvehicleForm.controls['passenger'].value;
bookingvehicle.driveMode = this.bookingvehicleForm.controls['driveMode'].value;
bookingvehicle.bookingDate = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['bookingDate'].value);
bookingvehicle.startPeriodeBooking = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['startPeriodeBooking'].value);
bookingvehicle.endPeriodeBooking = this.dateconverter.DTPToDateString(this.bookingvehicleForm.controls['endPeriodeBooking'].value);
bookingvehicle.startHoursOfDeparture = this.bookingvehicle.startHoursOfDeparture;
bookingvehicle.endHoursOfDeparture = this.bookingvehicle.endHoursOfDeparture;
bookingvehicle.destination = this.bookingvehicleForm.controls['destination'].value;
bookingvehicle.reason = this.bookingvehicleForm.controls['reason'].value;
bookingvehicle.typeRequest = this.bookingvehicleForm.controls['typeRequest'].value;
bookingvehicle.driver = null;
bookingvehicle.vehicle = null;
bookingvehicle.approvalByLeaderAdmin = 2;
bookingvehicle.isActive = this.bookingvehicle.isActive;
bookingvehicle.voucher = vouchers;
bookingvehicle.approvalByLeaderEmployee = this.bookingvehicle.approvalByLeaderEmployee;
}
this.receivebookingService.saveBooking(bookingvehicle)
.subscribe(
success => {
this.loading_btn = true;
this.goBack(true);
this.notification.success('Success', 'Booking Success');
},
error => {
this.loading_btn = false;
this.notification.error('Error', error.status + ":" + error.statusText + ":" + error._body);
}
);
console.log(bookingvehicle);
}
public getData() {
let a = this.bookingvehicle.startPeriodeBooking;
let b = this.bookingvehicle.endPeriodeBooking;
this.vehicleService.getAllOperationalVehicleAvailable(a, b).subscribe(s => {
this.getVehicle(s);
});
}
public openPdf() {
this.pdfmake.open();
}
public getVehicle(AllVehicle) {
let data: Array<any> = [];
for (let key in AllVehicle.data) {
data.push({
id: AllVehicle.data[key].id,
machineNumber: AllVehicle.data[key].machineNumber,
chassisNumber: AllVehicle.data[key].chassisNumber,
licenseNumber: AllVehicle.data[key].licenseNumber,
bpkbNumber: AllVehicle.data[key].bpkbNumber,
type: AllVehicle.data[key].type,
brand: AllVehicle.data[key].brand,
brandName: AllVehicle.data[key].brand.name,
color: AllVehicle.data[key].color,
year: AllVehicle.data[key].year,
annualTax: this.datePipe.transform(AllVehicle.data[key].annualTax, 'dd-MMM-yyyy'),
annual5Tax: this.datePipe.transform(AllVehicle.data[key].annual5Tax, 'dd-MMM-yyyy'),
kirValidityPeriod: this.datePipe.transform(AllVehicle.data[key].kirValidityPeriod, 'dd-MMM-yyyy'),
isActive: AllVehicle.data[key].isActive,
isSelected: false
})
}
this.itemResourceVehicle = new DataTableResource(data);
this.reloadItemsVehicle(this.params);
this.totalItem = AllVehicle.totalItem;
this.loading_btn = false;
}
public isShows() {
if (this.bookingvehicleForm.controls['typeRequest'].value == 1) {
if (this.bookingvehicleForm.controls['driveMode'].value == 0) {
this.showVehicle = false;
this.isShowDriver = true;
this.showVoucher = true;
}
else if (this.bookingvehicleForm.controls['driveMode'].value == 1) {
this.showVehicle = false;
this.isShowDriver = false;
this.showVoucher = true;
}
}
else if (this.bookingvehicleForm.controls['typeRequest'].value == 2) {
this.showVehicle = true;
this.isShowDriver = false;
this.showVoucher = false;
}
}
reloadItemsVehicle(params) {
if (this.itemResourceVehicle !== null && this.itemResourceVehicle !== undefined) {
this.itemResourceVehicle.count().then(count => this.itemCountVehicle = count);
this.itemResourceVehicle.query(params).then(items => this.itemsVehicle = items);
}
}
// To return pageSize
public onChangeRow() {
this.isShows();
}
// To go back previous page
public goBack(refresh: boolean): void {
this.routeBack.emit(refresh);
}
}
这是我的父母HTMl
<div class="form-group row">
<label for="functionName" class="col-sm-3 col-form-label">{{ 'Function' | translate }}</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="functionName" placeholder="{{'Function' | translate }}"
formControlName="functionName" required maxlength="50" readonly>
<small class="form-text" *ngIf="formErrors.functionName">{{ formErrors.function }}</small>
</div>
</div>
<div class="form-group row">
<label for="bookingDate" class="col-sm-3 col-form-label">{{ 'Date' | translate }}</label>
<div class="col-sm-9 input-group">
<input class="form-control" id="bookingDate" placeholder="{{ 'Date' | translate }}"
ngbDatepicker #d="ngbDatepicker" formControlName="bookingDate" required maxlength="20"
readonly>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">{{ 'Booking Period' | translate }}</label>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 form-group">
<div class="input-group">
<input class="form-control" name="startPeriodeBooking" formControlName="startPeriodeBooking"
id="startPeriodeBooking" placeholder="{{ 'From Booking Date' | translate }}"
ngbDatepicker #e="ngbDatepicker" required readonly>
<span class="input-group-append">
<button class="btn btn-success calendar" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 form-group">
<div class="input-group">
<input class="form-control" name="endPeriodeBooking" formControlName="endPeriodeBooking"
id="endPeriodeBooking" placeholder="{{ 'To Booking Date' | translate }}"
ngbDatepicker #c="ngbDatepicker" required readonly>
<span class="input-group-append">
<button class="btn btn-success calendar" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 mt-5 mr-sm-3 col-form-label">{{ 'Booking Time' | translate }}</label>
<div class="form-group">
<div class="input-group">
<div class="input-group mb-3 mr-sm-5">
<ngb-timepicker id="startHoursOfDeparture" name="startHoursOfDeparture"
formControlName="startHoursOfDeparture" [(ngModel)]="time1" disabled></ngb-timepicker>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group mt-3">
<span class="input-group mt-5 mr-sm-5">{{'To' | translate}}</span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group mb-3 mr-sm-1">
<ngb-timepicker id="endHoursOfDeparture" name="endHoursOfDeparture" formControlName="endHoursOfDeparture"
[(ngModel)]="time2"></ngb-timepicker>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="typeRequest" class="col-sm-3 col-form-label">{{ 'Type Of Request' | translate }}</label>
<div class="col-sm-9">
<select class="form-control" id="typeRequest" formControlName="typeRequest" (change)="onChangeRow()"
required>
<option value="0" disabled>Select Type Of Request</option>
<option value="1">{{'Vehicle' | translate}}</option>
<option value="2">{{'Voucher' | translate}}</option>
</select>
</div>
</div>
<div class="row show-grid" [nbSpinner]="loading" nbSpinnerStatus="active" *ngIf="!showVehicle">
<div class="col-md-12">
<hr>
<div class="form-group row">
<div class="col-12">
<label class="col-form-label">
<b>{{ 'Vehicle' | translate }}</b>
</label>
</div>
</div>
<driver-table-picker [isShow]="isShowDriver"></driver-table-picker>
<voucher-table-picker [isShow]="showVoucher"></voucher-table-picker>
</nb-card-body>
这是我的drivertablepicker.component.ts
import { Component, OnInit, ViewChild, Input, Output } from '@angular/core';
import { DataTable, DataTableResource } from 'angular5-data-table';
import { DriverService } from '../../../master/component/driver/driver.service';
import { DriverModel } from '../../../../@model/driver.model';
import { BookingVehicleModel } from '../../../../@model/booking-vehicle.model';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'driver-table-picker',
templateUrl: 'driver-table-picker.component.html',
})
export class DriverTablePickerComponent implements OnInit {
@Input() isShow: boolean;
@Input() bookingForm: FormGroup;
@Output() bookking: BookingVehicleModel;
// Datatable resource
itemResourceDriver: any;
itemsDriver = [];
itemCountDriver = 0;
params = { offset: 0, limit: 0 };
@ViewChild(DataTable) dataTable: DataTable;
public drivers: DriverModel[] = [];
public driver: DriverModel;
public bookingVehicle: BookingVehicleModel;
public totalItem: number = 0;
public loading_btn: boolean = false;
constructor(
private driverService: DriverService,
) {
}
ngOnInit() {
this.getData();
}
public getData() {
let a = this.bookingVehicle.startPeriodeBooking;
let b = this.bookingVehicle.endPeriodeBooking;
this.driverService.getAllDriverAvailable(a, b).subscribe(s => {
this.getDriver(s);
});
}
public getDriver(AllDriver) {
this.drivers = AllDriver.data;
this.dataMap(this.drivers);
this.itemResourceDriver = new DataTableResource(this.drivers);
this.reloadItemsDriver(this.params);
this.totalItem = AllDriver.totalItem;
this.loading_btn = false;
console.log(this.drivers);
}
private dataMap(drivers: DriverModel[]) {
drivers.forEach(f => {
f.employeeName = f.employee.name;
f.employeeNRP = f.employee.employeeNumber;
f.employeeLicenseNumber = f.employee.driverLicenseNumber;
f.employeePhoneNumber = f.employee.phoneNumber;
f.employeeFunction = f.employee.function.code + ' - ' + f.employee.function.name;
f.DriverStatus = f.statusDriver;
if (f.employee.function.name != null && f.employee.function.name != '') {
f.employeeFunction = f.employee.function.code + ' - ' + f.employee.function.name;
}
else if (f.employee.function.name == null || f.employee.function.name == '') {
f.employeeFunction = f.employee.function.code;
}
})
}
reloadItemsDriver(params) {
if (this.itemResourceDriver !== null && this.itemResourceDriver !== undefined) {
this.itemResourceDriver.count().then(count => this.itemCountDriver = count);
this.itemResourceDriver.query(params).then(items => this.itemsDriver = items);
}
}
}
这是我的错误输出
这是我的结构组件（红色圆圈是我的位置组件，有问题）
那么，如何从ReceiveBookingManageComponent获取值startPeriodBooking到DriverTablePickerComponent中的实现？
谢谢：）
2 个答案:
答案 0 :(得分：0)
您正试图从已声明为Input属性的startPeriodeBooking中获取属性bookingvehicle，这意味着您应该在其中使用类似<receive-booking-manage bookingvehicle="someInstanceOfThat">的组件您的模板，这就是您“在其他组件中获取价值”的方式，称为父子组件通信，check this video for more info。
如果这不适用于您，请将您的组件模板添加到问题中
答案 1 :(得分：0)
我在您的代码中看到的问题是您没有在任何地方定义的bookingVehicle值。您只需声明了变量即可。
public bookingVehicle: BookingVehicleModel;
，然后将其分配给
let a = this.bookingVehicle.startPeriodeBooking;
let b = this.bookingVehicle.endPeriodeBooking;
因此，您无法在html上呈现它，因为bookingVehicle仍未定义。
现在，查看您的代码，您有
receivebookingManage：父组件
drivertablepicker：子组件
因此，您可以如Gerardo Sabetta's answer
中所述将值作为@input传递。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？