Angular - 在属性上创建属性

Question

如何修复视图中的以下错误：

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

视图代码：

<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>

我认为我需要在 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;
    }
  }
}

问题是...如何在属性上创建属性？

我的组件代码是here。

Answer 1

如果你想像这样使用它：sermon?.sermonSession?.sessionEnum 你必须使它成为对象，而不是数组。

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

但是如果你传递一个对象数组，你可以这样做：

sermon.sermonSession[0].sessionEnum 

一切都取决于您的实现。

对象模型的外观：

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

你需要像这样创建对象

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

检查您的对象嵌套，是否与此格式相似。