Angular - Create a property on a property

Question

How do I fix the following error on my view:

ERROR in src/app/sermon/sermon.component.html(14,46): : Property 'sessionEnum' does not exist on type 'string[]'.

Code for the view:

<div class="product-details text">
  <ul class="info-list">
    <li><span>Session : </span> {{ sermon?.sermonSession?.sessionEnum }}</li>
    <li><span>Recorded : </span> {{ sermon.date }}</li>
  </ul>
</div>

I take it I need to create that property on sermonSession:

export namespace SermonModule {

  export interface Serializable<T> {
    deserialize(input: Object): T;
  }

  export class Sermon implements Serializable<Sermon> {
    id: string;
    name: string;
    fileName: string;
    speaker: string;
    description: string;
    tags: string[];
    date: string;
    sermonSession: string[];

    deserialize(input) {
      this.id = input.id;
      this.name = input.name;
      this.fileName = input.fileName;
      this.speaker = input.speaker;
      this.description = input.description;
      this.tags = input.tags;
      this.date = input.date;
      this.sermonSession = input.sermonSession;
      return this;
    }
  }
}

Question is... how do I create a property on a property?

My code for the component is here .

Answer 1

If you want to use it like this: sermon?.sermonSession?.sessionEnum you have to make it object, not an array.

let sermonSession = { sessionEnum: 'some string'};

But if you pass an array of object you can do it like:

sermon.sermonSession[0].sessionEnum 

all depend on your implementation.

How object model will looks:

export namespace SermonModule {

  export interface Serializable<T> {
    deserialize(input: Object): T;
  }

  export class Sermon implements Serializable<Sermon> {
    id: string;
    name: string;
    fileName: string;
    speaker: string;
    description: string;
    tags: string[];
    date: string;
    sermonSession: object;

    deserialize(input) {
      this.id = input.id;
      this.name = input.name;
      this.fileName = input.fileName;
      this.speaker = input.speaker;
      this.description = input.description;
      this.tags = input.tags;
      this.date = input.date;
      this.sermonSession = input.sermonSession;
      return this;
    }
  }
}

Answer 2

You need to create object like

this.sermon={
   ...
   sermonSession: {
     ...,
     sessionEnum:"value"
   }
}

check your object nesting, whether its similar to this format or not.