Получение ОШИБКИ TypeError: Невозможно прочитать свойство 'x' из неопределенного при чтении объекта JSON через сервис в компоненте типа «брат».

Question

Я определил службу следующим образом:

dataservice.ts

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class LoeDataService {

public storage: any;

constructor() { } 
}

В form-component.ts импортирую, что

import { LoeDataService } from '../loe-data.service';

Я объявил какниже,

private LoeData: LoeDataService,


onSubmit(){
this.LoeData.storage = {
  "duration" : this.durationOfService,
  "sdm" : this.offeringsForm.controls.sdm.value,
}

После отправки данных формы я вызову функцию для хранения данных, как указано выше, и передам этот объект другому компоненту для дальнейшей обработки.

В компоненте процесса.провайдеры ts

export class ProcessFormData{
constructor(

public data: LoeDataService,


) { }
ngOnInit(){
calculate();
}

}
calculate(){
if (this.data.storage.sdm == 1){
 //truncated the code 
 }

}

были обновлены, как показано ниже.

providers: [ 
LoeDataService
]

Я получаю сообщение об ошибке при указанном выше условии, как указано ниже.

ng: ///AppModule/proComponent_Host.ngfactory.js:5 ОШИБКА TypeError: Невозможно прочитать свойство 'sdm' из неопределенного

Answer 1

Я считаю, this.data.storage не определено.Присвойте ему начальное значение:

public storage: any = {};

Вам также необходимо ввести как data, а не Data (соответствует вашему регистру).

Answer 2

Вам не нужна эта часть:

providers: [ 
  LoeDataService
]

, потому что LoeDataService предоставляется в корне здесь:

@Injectable({
  providedIn: 'root'
})
export class LoeDataService {
...

Вы можете получить к нему доступ с помощью this.Data (вывпрыскивая свой сервис как Data, а не data).Первоначально storage равен undefined (пока не получит значение после отправки), но вы пытаетесь получить к нему доступ ngOnInit.Поэтому вам необходимо присвоить начальное значение storage:

dataservice.ts:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoeDataService {

  public storage: = {
    "duration": 0,
    "sdm": "",
  };

  constructor() { } 
}

form-component.ts:

private LoeData: LoeDataService,


onSubmit() {
  this.LoeData.storage.duration = this.durationOfService
  this.LoeData.storage.sdm = this.offeringsForm.controls.sdm.value
}

processcomponent.ts:

export class ProcessFormData {
  constructor(public Data: LoeDataService) { }

  ngOnInit() {
    calculate();
  }

  calculate() {
    // note that this runs only once
    // when component get initialized
    if (this.Data.storage.sdm == 1) {
      // truncated the code 
    }
  }

}