Как инициализировать дочерний объект json в angular/typescript?

У меня есть файл model.ts.

export class MainClass {
    someVar: string;
    var2: string;
    subClass: SubClass;
    contact: ContactList;
}

export class SubClass {
  subItem: {
    item1: string;
    item2: string;
    item3: string;
  }
  constructor() {}
}


export class ContactList {
  itemList: ListItems[];
  constructor() {}
}


export class ListItems {
  list1: string;
  list2: string;
  list3: string;  
}

У меня есть файл service.ts, в котором есть методы установки, которые я пытаюсь обновить в модели.

constructor(private model: SomeModel) {}

//some code

updateList(param1, param2, param3) {
    this.model.subClass.subItem.item1 = param1;//doesn't work
    this.model.contact.item[0].list1 = param2;//doesn't work
    this.model.someVar = param3;//works
}

Это работает для одиночных переменных, но я получаю сообщение об ошибке Can't read property subItem of undefined при попытке обновить подкласс и контакт. Я знаю, что мне нужно инициализировать subItem и itemList в конструкторе модели, но я не могу понять синтаксис. Как я могу инициализировать модель и обновить модель?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
1 062
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Пожалуйста, убедитесь, что вы вызываете конструктор сложных типов, которые вы хотите инициализировать в вашем MainClass.

export class MainClass {
    someVar: string;
    var2: string;
    subClass: SubClass();
    contact: ContactList();
}

Обратите внимание на скобки. Если у вас более сложная инициализация, есть и другие аспекты, на которые мы должны обратить внимание, поскольку здесь описано несколько сценариев. Например, в вашем подклассе вы должны убедиться, что у subItem есть конструктор, если вы хотите, чтобы он также инициализировался при запуске экземпляра подкласса.

Другой вариант инициализации subItem в вашем родительском классе — сделать что-то подобное в конструкторе:

 constructor() {
        //... some init code
        this.subItem = new Array<SubItemModel>();
        this.subItem.push(new SubItemModel());
    }

Надеюсь это поможет,

Инициализация переменной в модели вызывает TS1005: ';' expected, TS1109: Expression expected, TS1128: Declaration or statement expected

kratos24 16.07.2019 03:29

Попробуйте subClass = new SubClass();.

ConnorsFan 16.07.2019 03:36

@kratos24 - Вы сделали то же самое с contact?

ConnorsFan 16.07.2019 03:42

Хм... Возможно, я неправильно предположил, что вы передаете инициализированную модель? Вы должны инициализировать экземпляр, входящий в метод в качестве параметра (т.е. не может быть интерфейсом или чем-то подобным). Предполагая, что сложные типы внутри родителя также имеют конструкторы по умолчанию, это должно работать без проблем. Не могли бы вы включить вспомогательный код в свой вопрос?

iHazCode 16.07.2019 04:03

обновленный ответ, чтобы включить способ гарантировать, что подэлемент будет иметь по крайней мере элемент в случае, если его конструктор по умолчанию не обрабатывает это.

iHazCode 16.07.2019 04:08

Поскольку подкласс и подпункт не определены. Вы должны создать для них новый экземпляр перед установкой значения:

Измените SomeModel на Основной класс или используйте функцию .карта для сопоставления.

this.model.subClass = new SubClass();
this.model.subClass.subItem =  {item1:'123',item2: '222', item3: '333'};

Причиной этой ошибки является подкласс, подэлемент, контакт не определены. Чтобы решить эту проблему, измените модели следующим образом.

export class MainClass {
    someVar: string;
    var2: string;
    subClass: SubClass;
    contact: ContactList;
    constructor() {
      if (!this.subClass)
      this.subClass =new SubClass();
      if (!this.contact)
      this.contact =new ContactList();
    }
}

export class SubClass {
  subItem: SubItem;
  constructor() {
    if (!this.subItem)
     this.subItem =new SubItem();
  }
}
export class SubItem {

    item1: string;
    item2: string;
    item3: string;

  constructor() {}
}


export class ContactList {
  itemList: ListItems[]=[];
  constructor() {}
}
export class ListItems {
  list1: string;
  list2: string;
  list3: string;  
}

В сервисе

constructor(private model: SomeModel) {}

//some code

updateList(param1, param2, param3) {
    this.model.subClass.subItem.item1 = param1;

 this.model.contact.itemList = [];
 let listItem: ListItems =new ListItems();
 listItem.list1 =param2
 this.model.contact.itemList.push(listItem)
    this.model.someVar = param3;
}

Пусть это поможет вам понять свои ошибки, и вы сможете изменить код в соответствии с вашими требованиями. Надеюсь, это поможет.

Ответ принят как подходящий

Мне пришлось инициализировать конструктор в модели, как это

export class MainClass {
  someVar: string;
  var2: string;
  subClass: SubClass;
  contact: ContactList;
  constructor() {
    this.subClass = new SubClass();
    this.contact = new ContactList();
  }
}

export class SubClass {
  subItemVar: SubItem;
  constructor() {
    this.subItemVar = new SubItem();
  }
}

export class SubItem {
  item1: string;
  item2: string;
  item3: string;
}

export class ContactList {
  itemList: ListItems[];
  constructor() {
    this.itemList = new Array<ListItems>();
  }
}

export class ListItems {
  list1: string;
  list2: string;
  list3: string;
}

Другие вопросы по теме