Блог

Я получаю данные из базы данных с помощью Api, который находится в сервисе LeaveService. Для получения данных используется метод applyLeaveGet(идентификатор:строка), который находится в LeaveService. Этот метод предоставляет определенные значения, такие как дата присоединения из базы данных. Я использую пользовательский интерфейс углового материала с реактивной формой.

Проблема в том, что, хотя экземпляр leave получает данные, но в ngOnInt (), свойства не получают значения.ngOnInt() запускается. Например, я получаю ошибку, не определенную для даты присоединения. Как я могу решить эту проблему. Спасибо вам за помощь

Служба ухода : метод applyLeaveGet(идентификатор:строка)

 applyLeaveGet(id:string){  return this.http.getlt;Leavegt;('https://localhost:44330/api/leave/ApplyLeaveGet/'  id);  }  

Компонент ApplyLeave

 import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup} from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import { AuthenticationService } from 'src/app/authentication.service'; import { Leave } from '../interfaces/leave'; import { LeaveService } from '../services/leave.service';  @Component({  selector: 'app-add-edit-leave',  templateUrl: './add-edit-leave.component.html',  styleUrls: ['./add-edit-leave.component.css'] }) export class AddEditLeaveComponent implements OnInit {   form: FormGroup;  currentDate = new Date();  minDate: Date;  maxDate: Date;   selectedFile: File = null;  url : any;    leave :Leave;    constructor(private fb: FormBuilder, private http: HttpClient  ,private leaveService : LeaveService  ,private route : ActivatedRoute  ,private authenticationService: AuthenticationService  ) {   leaveService.applyLeaveGet(authenticationService.getUserId())  .subscribe(data =gt;  this.leave = data  );   // Set the minimum to January 1st 20 years in the past and December 31st a year in the future.  const currentYear = new Date().getFullYear();  this.minDate = new Date(currentYear - 20, 0, 1);  this.maxDate = new Date(currentYear   1, 11, 31);  }    ngOnInit() {  this.form = this.fb.group({  "currentDate": new FormControl(this.currentDate.toISOString().split("T")[0]),  "joiningDate":[''],  "fromDate":[''],  "tillDate":[''],  "leaveType":[''],  "duration":[''],  "reason":[''],  "filePath":['']  });    }    onSelectFile(event: any) {  this.selectedFile = lt;Filegt;event.target.files[0];  if (event.target.files amp;amp; event.target.files[0]) {  var reader = new FileReader();  reader.onload = (event: any) =gt; {  this.url = event.target.result;  }  reader.readAsDataURL(event.target.files[0]);  }  else  {  this.url = "";  }    }    onSubmit(){  var userId = this.authenticationService.getUserId();  const formData = new FormData();  formData.append('userId', userId);  formData.append('currentDate', this.form.value.fullName);  formData.append('joiningDate', this.form.value.fullName);  formData.append('fromDate', this.form.value.fullName);  formData.append('tillDate', this.form.value.fullName);  formData.append('leaveType', this.form.value.fullName);  formData.append('duration', this.form.value.fullName);  formData.append('reason', this.form.value.fullName);  formData.append('balanceAnnualLeave', this.form.value.fullName);  formData.append('balanceSickLeave', this.form.value.fullName);  formData.append('balanceAnnualLeave', this.form.value.fullName);  formData.append('File', this.selectedFile);  } }  

это html

 lt;pgt;add-edit-leave works!lt;/pgt; lt;div class="container"gt;  lt;form class="form-container" [formGroup]="form" (ngSubmit)="onSubmit()"gt;  lt;mat-cardgt;  lt;mat-card-headergt;  lt;mat-card-titlegt;Apply Leavelt;/mat-card-titlegt;  lt;/mat-card-headergt;  lt;mat-card-contentgt;  lt;div class="row"gt;  lt;div class="col-md-6"gt;  lt;mat-form-field class="full-width"gt;  lt;mat-labelgt;Today's Datelt;/mat-labelgt;  lt;input formControlName="currentDate" type="date" class="form-control" matInput placeholder="Today's Date" readonly gt;   lt;/mat-form-fieldgt;  lt;/divgt;    lt;div class="col-md-6"gt;  lt;mat-form-field class="full-width"gt;  lt;mat-labelgt;Joining Datelt;/mat-labelgt;  lt;input formControlName="joiningDate" type="datetime" class="form-control" matInput placeholder="Joining Date"gt;  lt;/mat-form-fieldgt;  lt;/divgt;  lt;/divgt;  lt;!--Date Requested For--gt;  lt;div class="row"gt;  lt;div class="col-md-6"gt;  lt;mat-form-field class="full-width" appearance="fill"gt;  lt;mat-labelgt;From Datelt;/mat-labelgt;  lt;input matInput formControlName="fromDate" [min]="minDate" [max]="maxDate"  [matDatepicker]="picker"gt;  lt;mat-datepicker-toggle matSuffix [for]="picker"gt;lt;/mat-datepicker-togglegt;  lt;mat-datepicker #pickergt;lt;/mat-datepickergt;  lt;/mat-form-fieldgt;  lt;/divgt;  lt;div class="col-md-6"gt;  lt;mat-form-field class="full-width" appearance="fill"gt;  lt;mat-labelgt;Till Datelt;/mat-labelgt;  lt;input matInput formControlName="tillDate" [min]="minDate" [max]="maxDate"  [matDatepicker]="pickerTillDate"gt;  lt;mat-datepicker-toggle matSuffix [for]="pickerTillDate"gt;lt;/mat-datepicker-togglegt;  lt;mat-datepicker #pickerTillDategt;lt;/mat-datepickergt;  lt;/mat-form-fieldgt;  lt;/divgt;   lt;/divgt;  lt;!--Leave Type Duration(dropdown box)--gt;  lt;div class="row"gt;  lt;div class="col-md-6"gt;  lt;mat-form-field class="full-width" appearance="fill"gt;  lt;mat-labelgt;Leave Typelt;/mat-labelgt;  lt;select formControlName="leaveType" matNativeControl id="mySelectId"gt;  lt;option value="" disabled selectedgt;lt;/optiongt;  lt;option value="Annual Leave"gt;Annual Leavelt;/optiongt;  lt;option value="Sick Leave"gt;Sick Leavelt;/optiongt;  lt;/selectgt;  lt;/mat-form-fieldgt;  lt;/divgt;  lt;div class="col-md-6"gt;  lt;mat-form-field class="full-width" appearance="fill"gt;  lt;mat-labelgt;Durationlt;/mat-labelgt;  lt;select formControlName="duration" matNativeControl id="mySelectId"gt;  lt;option value="" disabled selectedgt;lt;/optiongt;  lt;option value="Full Day "gt;Full Daylt;/optiongt;  lt;option value="First Half Day"gt;First Half Daylt;/optiongt;  lt;option value="Second Half Day"gt;Second Half Daylt;/optiongt;  lt;/selectgt;  lt;/mat-form-fieldgt;  lt;/divgt;  lt;/divgt;  lt;!--Reason--gt;  lt;div class="row"gt;  lt;div class="col-md-12"gt;  lt;mat-form-field class="full-width"gt;  lt;mat-labelgt;Reasonlt;/mat-labelgt;  lt;input formControlName="reason" matInput placeholder="Reason"gt;  lt;/mat-form-fieldgt;  lt;/divgt;  lt;/divgt;    lt;div class="row"gt;  lt;div class="col-md-6"gt;  lt;mat-labelgt;Leave Balacnelt;/mat-labelgt;lt;brgt;  lt;ulgt;  lt;ligt;  annualLeaveBalacne: lt;spangt;{{leave.balanceAnnualLeave}}lt;/spangt; lt;brgt;  lt;/ligt;  lt;ligt;  sickLeaveBalance: lt;spangt;{{leave.balanceSickLeave}}lt;/spangt;  lt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;!--Submit--gt;  lt;mat-card-actionsgt;  lt;button mat-stroked-button type="submitgt;Basiclt;/buttongt;  lt;/mat-card-actionsgt;  lt;/mat-card-contentgt;  lt;/mat-cardgt;   lt;/formgt; lt;/divgt;  

В текущей версии вашего вопроса это не похоже на то, что вы задаете какие-либо значения this.leave в форме OnInit . Из описания вашей проблемы и остальной части вашего кода я думаю, что ваша проблема заключается в асинхронном вызове LeaveService конструктора. Поскольку это асинхронный код, он может быть не завершен до ngOnInit того, как будет вызван и выполнен, таким образом, появляются сообщения об ошибках о неопределенных значениях. Вам нужно дождаться завершения HTTP-вызова, прежде чем обращаться к данным.

Поскольку вы не должны выполнять потенциально длительные HTTP-вызовы в конструкторе, я предлагаю перенести эту часть OnInit . Все, что не является длительным и асинхронным, может быть выполнено в конструкторе. Ваш код может быть переработан следующим образом:

 constructor(private fb: FormBuilder,  private http: HttpClient,  private leaveService : LeaveService,  private route : ActivatedRoute,  private authenticationService: AuthenticationService ) {  // Set the minimum to January 1st 20 years in the past and December 31st a year in the future.  const currentYear = new Date().getFullYear();  this.minDate = new Date(currentYear - 20, 0, 1);  this.maxDate = new Date(currentYear   1, 11, 31);   this.form = this.fb.group({  "currentDate": new FormControl(this.currentDate.toISOString().split("T")[0]),  "joiningDate": [''],  "fromDate": [''],  "tillDate": [''],  "leaveType": [''],  "duration": [''],  "reason": [''],  "filePath": ['']  }); }  ngOnInit() {  leaveService.applyLeaveGet(authenticationService.getUserId())  .subscribe(data =gt;  {  this.leave = data;   // now data is here and can be used to set initial form values, example:  this.form.get('leaveType').setValue(this.leave.Type);  }  ); }