Unable to access Angular2 Service object properties

Question

I followed the Angular2 documentation to create a service for my app, but I cannot seem to access the information on the front end.

When I try to access firstVariable and secondVariable in the template using interpolation, I get [Object object] . I decided to use the json pipe to get a nice read out of the object, which works. However, I can't figure out why I cannot access firstVariable and secondVariable . I get an error that reads cannot read property 'firstVariable' of undefined .

Here is my code:

moose.component.ts

import { Component, OnInit } from '@angular/core';

import { MooseService } from './moose.service';

import { MooseCode } from './moose.code';


@Component({
  selector: 'moose-selector',
  templateUrl: './moose.component.html',
  providers: [MooseService]
})

export class MooseComponent implements OnInit {

  currentThing: MooseCode[];

  getCode(): void {
    this._mooseService.getCodeSlowly()
    .then(currentThing => this.currentThing = currentThing);
  }

  ngOnInit() {
    this.getCode();
  }

  constructor(private _mooseService: MooseService) {}

}

moose.service.ts

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

import { MooseCode } from './moose.code';
import { MOCK_DATA } from './mock-data';

@Injectable()

export class MooseService {

  getCode(): Promise<MooseCode[]> {
    return Promise.resolve(MOCK_DATA);
  }

  getCodeSlowly(): Promise<MooseCode[]> {
    return new Promise<MooseCode[]>(resolve =>
      setTimeout(resolve, 2000)) // delay 2 seconds
      .then(() => this.getCode());
  }

}

moose.component.html

<pre>
{{ currentThing | json }}
</pre>

moose.code.ts

export class MooseCode {

  constructor(
    public firstVariable: any,
    public secondVariable: any,
  ) {}
}

mock.data.ts

import { MooseCode } from './moose.code';

export const MOCK_DATA: MooseCode[] = [
  {
      'firstVariable': 'any',
      'secondVariable': 'any',
}
];

I tried accessing firstVariable and secondVariable in the template using the following methods:

{{currentThing.firstVariable}} and {{currentThing[0].firstVariable}}

Nothing works! What am I doing wrong?

Answer 1

Your services' getHomePageCodeSlowly resolves with no value. Try:

setTimeout(resolve(MOCK_DATA), 2000))

then @ component getCode() currentThing[0].firstVariable or secondvariable

Answer 2

@estus approach will work - {{currentThing?[0].firstVariable}} . But if you don't want to use a question mark each time, use an ngIf - this will work the same way. so for instance, assuming:

ItemObject = {
  id: 1,
  name: "something",
  anotherProperty: "whatever",
  isThisReal: false
}
<div class="item" *ngIf="ItemsObject">
  <h1>{{ItemObject.isThisReal}}</h1>
</div>

The output should be: <h1>false</h1>