CODEWITHSUNDEEP
htmlangulartypescript
edgee
edgee

Reputation: 3

Why are the variables of my object undefined after a Subscription

I'm new to Angular. I'm using Angular9. I tried to subscribe to an observable as you will read in the following:

I have a service that calls an HTTP request and returns an Observable. The subscription works fine. At least it seems like it.

ngOnInit() {
  this.initialDataViewModelSubscription = this.initialDataViewModelService.load()
     .subscribe(initialDataViewModel => {
        this.initialDataViewModel = initialDataViewModel;
     }, err => console.log(err));
}

On the Html I use an Angular-Material form to display the content. 

<div>
  <mat-form-field>
  <mat-label>Mitarbeiter</mat-label>
    <input matInput placeholder="Mitarbeiter"
       [value]="this.getData()" <!-- To test the Data, value would be this.initialDataViewModel.curentEmployee-->
       [readonly]="true">
  </mat-form-field>
</div>

getData() in the component:

getData() {
    if (this.initialDataViewModel) {
      console.log('IDV:', this.initialDataViewModel)
      console.log('OK:', this.initialDataViewModel.OK)
      console.log('ASE:', this.initialDataViewModel.allowSelectEmployee)
      console.log('CD:', this.initialDataViewModel.currentDate)
      console.log('CE:', this.initialDataViewModel.currentEmployee)
    }
}

The code above Produces the following outcome:

IDV: {
      CurrentEmployee: {…}, 
      CurrentDate: "/Date(1584918000000)/", 
      AllowSelectEmployee: true, 
      SpecialProjectList: Array(7), 
      OK: true, …
     }
     > CurrentEmployee: {
          MitarbeiterId: 742, 
          MitarbeiterKuerzel: "GGG (NAME)", 
          MitarbeiterText: "GGG (NAME)", 
          MitarbeiterName: "Name"
       }
       CurrentDate: "/Date(1584918000000)/"AllowSelectEmployee: true
       SpecialProjectList: (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
       OK: true 
       Message: null
       __proto__: Object
}
component.component.ts:70 OK: true
component.component.ts:71 ASE: undefined
component.component.ts:72 CD: undefined
component.component.ts:73 CE: undefined

As far as I can see, my Object initialDataViewModel is initialized and all variables are set. But as soon as I want to use a variable (e.g. currentEmployee), it is undefined. Why is it like this, what am I doing wrong.

Edit: 

@Component({
  selector: 'app-zeiterfassung',
  templateUrl: './zeiterfassung.component.html',
  styleUrls: ['./zeiterfassung.component.css']
})
export class ZeiterfassungComponent implements OnInit, OnDestroy{

  initialDataViewModel: InitialDataViewModel;

  initialDataViewModelObs: Observable<InitialDataViewModel>;

  initialDataViewModelSubscription;

  currentEmployee: EmployeeModel = new EmployeeModel();

  dateFormControl = new FormControl();

  projektFormControl = new FormControl('', Validators.required);

  dateClass;

  constructor(private initialDataViewModelService: InitialDataViewModelService) {
  }

  ngOnInit() {
    this.initialDataViewModelSubscription = 
    this.initialDataViewModelService.load().subscribe(initialDataViewModel => {
       this.initialDataViewModel = initialDataViewModel;
    }, err => console.log(err));
  }

  ngOnDestroy() {
    Utils.unsubscribeSubscription(this.initialDataViewModelSubscription);
  }

  getData() {
    if (this.initialDataViewModel) {
      console.log('IDV:', this.initialDataViewModel)
      console.log('OK:', this.initialDataViewModel.OK)
      console.log('ASE:', this.initialDataViewModel.allowSelectEmployee)
      console.log('CD:', this.initialDataViewModel.currentDate)
      console.log('CE:', this.initialDataViewModel.currentEmployee)
    }
  }

}

Upvotes: 0

Views: 73

Answers (1)

Dwayne Hua
Dwayne Hua

Reputation: 46

It's a little hard to see exactly what is going on without be the complete component code, but i think what is happening is the template is trying to use your data before the observable resolves. Typically, i think you need to do an existence check on your data if it's being populated by an observable. So:

<div>
  <mat-form-field>
  <mat-label>Mitarbeiter</mat-label>
    <input *ngIf="initialDataViewModel" matInput placeholder="Mitarbeiter"
       [value]="initialDataViewModel"
       [readonly]="true">
  </mat-form-field>
</div>

then, the input won't show up until the data is populated.

Also, it looks like your variable capitalization is inconsistent.

allowSelectEmployee vs AllowSelectEmployee
currentDate vs CurrentDate
specialProjectList vs SpecialProjectList

etc

Upvotes: 1

Related Questions