Trying to access my TypeScript class properties so that I can display in HTML

Question

I am trying to redevelop a project I am working on into Angular 2 from Angular 1. Currently I am using Ionic to build it as it is used on iOS. This redevelopment is my first interaction with TypeScript at all.

So far I have been able to get most of what I need done. But now my issue is that I want to access a property of my class and display it in the HTML code but only after it has been set, this way I wouldn't run into errors. But my code or at least Ionic says that the property is undefined even if I use the ngOnInit or ngAfterContentInit functions to try and do this.

I may be going about this code the wrong way but I would like to ask how to access these properties so that I can display them in the HTML as *ngFor= 'let e of EventInfo' then {{e.eventName}}. Please help me out. I will continue to search the previous questions to hopefully find some inspiration to answer my question.

I will add my class code so far below.

To add some more information, the e.eventName I am planning to use on a menu that toggles out and it will display the information I want from eventInfo.

For the code below, I also added what pullJson.getMondayJson looks like.

This is what eventInfo initially looked like when I tried it out. this.eventInfo = [{rType: this.mondayJson.agendaEvents[0].rowType, eventName:this.mondayJson.agendaEvents[0].eventName, startTime:this.mondayJson.agendaEvents[0].startTime, endTime:this.mondayJson.agendaEvents[0].endTime}];

@Component({
  selector: 'center-panel',
  host: {'(window:scroll)': 'track($event)'},
  templateUrl: 'center-panel.html'
})

export class CenterPanel {
  mondayJson;
  tuesdayJson;
  wednesdayJson;

  pages: Array<{title: string}>;
  eventInfo: Array<{eventName: string, startTime: any, endTime: any}>;


  public constructor(public pullJson:PullJson, public menu: MenuController, locationA2:Location) {
    this.pages = [
      { title: 'CenterPanel'},
      { title: 'RightPanel'}
    ];

    pullJson.getMondayJson
      .subscribe(
        getMondayJson => this.mondayJson = {
          dayOfWeek: getMondayJson.dayOfWeek.toUpperCase(),
          agendaEvents: getMondayJson.agendaEvents
        },
        console.error,
        () => console.log('Completed HTTP for Monday!!')
      );
  }

this.getMondayJson = this.http.get('https://../remote-server-file.json')
      .map(response => response.json());

Someone asked me to post the template code:

  <div id="{{ 'MONDAY-events-' + event.startTime }}" menuToggle class="agenda-event-container" *ngFor="let event of mondayJson.agendaEvents" (click)="event.itemClicked = !event.itemClicked">
    <div class="agenda-event-row {{event.rowType}}">
      <div class="time-container">
        <div class="event-left-border-{{event.iconType}}">
          <div class="start-time">
            {{event.startTime}}
          </div>
          <div id="MONDAY-events-endTime" class="end-time">
            {{event.endTime}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here is an example of what the Json files look like:

{
      "rowType": "event",
      "eventName": "Facilitator Training",
      "iconType": "workshop",
      "startTime": "8:00AM",
      "endTime": "10:00AM",
      "headerLocation": "Go To Brooklyn",
      "locationDetails": {
        "jsonGroupFile": {
          "subData": "",
        },
        "hardcodedList": ["<b>Test:<br>New York"]
      },
      "subEvents": [
        {
          "presentationName": "",
          "durationInMinutes": "120",
          "speakers": "Test Person"
        }
      ],
      "images": [
        {
          "imageType": "hotel"
        },
        {
          "imageType": "map"
        }
      ],
      "files": []
    }

make `eventInfo = []` in constructor and set it to new value whenever available. Check http://stackoverflow.com/questions/43696767/json-response-is-in-array-but-still-throws-an-error-ngfor-only-supports-binding — Priyesh Kumar, May 01 '17 at 19:36
since you get your data asynchronously you'd need to initialize your eventinfo with some value to prevent the undefined error. — csim, May 01 '17 at 19:40
Note that Stack Snippets (the "Code Snippet" feature) should only be used for runnable code. Running the code in your case would do nothing interesting. — Heretic Monkey, May 01 '17 at 19:43
@MikeMcCaughan thank you for editing that. I will try use it properly in the future. — Alan J., May 01 '17 at 19:48
@csim I updated my question with what I tried before. Please take a look. — Alan J., May 01 '17 at 19:56
I'm not quite sure what you expect - you can't make code wait for async calls to return. So you either make sure that you have your data before you switch to your view which needs it (via an async call chain) or you provide some default values until your http call returns. — csim, May 01 '17 at 20:17
@csim do you by chance have some examples of how to do either of your suggestions? Is there no way to make the http calls then access the data? Or make it wait a certain time before running the eventInfo code? — Alan J., May 01 '17 at 20:37
here is a simple example on how to accomplish async chaining https://stackoverflow.com/questions/35173649/angular2-how-to-chain-async-service-calls-http-requests-in-a-component — csim, May 01 '17 at 20:41

Trying to access my TypeScript class properties so that I can display in HTML

0 Answers0