0

I am writing an Angular2 application. I want to display messages using an interface and an array containing all the messages. Here is the interesting part of my TypeScript component:

export class ChatComponent
{
  messages: message[];
  constructor()
  {
    this.messages.push({from: 'me', time: new Date().getTime(), type: 'text', value: 'Hallo Welt!', sent: new Date().getTime(), delivered: 0, read: 0});
  }
}

interface message
{
  from: string;
  time: number;
  type: string;
  value: string;
  sent: number;
  delivered: number;
  read: number;
}

As you can see from TypeScript side of things everything looks alright (I guess). Displaying stuff in the template worked fine, in this case I am using the following:

<div class = "message" *ngFor = "let message of messages">
  <div>{{message.value}}</div>
  <div>{{message.time}}</div>
</div>

When just using an array and filling it with objects this setup is working fine. But as soon as I use the interface message and the array I get

EXCEPTION: Error in :0:0 caused by: this.messages is undefined

I feel like it's some stupid mistake or misunderstanding, but couldn't find anything useful. Why should this.messages be undefined?

Improve this question
3
  • "But as soon as I use the interface message and the array I get" how do you use "interface messages" to get this error? Commented Feb 12, 2017 at 20:09
  • Well, to be honest I don't know any other way to express it? Sorry, I am new to TypeScript... Commented Feb 12, 2017 at 20:17
  • It would be nice if one could tell why a question is getting a downvote. I need information to get better. Commented Feb 12, 2017 at 20:22

1 Answer 1

Reset to default
1

From your code, it looks like you are not initializing the messages array. You are not giving the field a value before setting it. As your code stands right now, the constructor will throw an error because you are calling this.messages.push but this.messages is undefined because you did not give it a value. You can use the following to fix it:

export class ChatComponent
{
  messages: message[];
  constructor()
  {
    this.messages = [];
    this.messages.push({from: 'me', time: new Date().getTime(), type: 'text', value: 'Hallo Welt!', sent: new Date().getTime(), delivered: 0, read: 0});
  }
}

Or even better:

export class ChatComponent
{
  messages: message[];
  constructor()
  {
    this.messages = [{from: 'me', time: new Date().getTime(), type: 'text', value: 'Hallo Welt!', sent: new Date().getTime(), delivered: 0, read: 0}];
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.