Angular - Объявить вложенный интерфейсный объект Array

Question

Поскольку я новичок в Angular и хотел использовать правильные принципы проектирования, я хотел использовать интерфейсы для структуры данных.

Вот ответ JSON от сервера:

{
  "appGroup": "Brokerage",
  "appName": "app-api",
  "appType": "Mulesoft",
  "config": "tmxpath,",
  "dashboard": "dashboard",
  "healthCheckURL": "api/ping",
  "hostList": [
    {
      "hostID": "host1",
      "port": 8080,
      "domain": "sampletmxdomain"
    },
    {
      "hostID": "host2",
      "port": 443,
      "domain": "tmxdomain2"
    }
  ]
}

В этом, как вы можете видеть hostList - это массив объектов.Поэтому я не могу определить и использовать интерфейс и объект.

Вот что у меня сейчас есть:

Интерфейс

export interface IAppOnboard {
  appName: string;
  appGroup: string;
  appType: string;
  config: string[];
  dashboard: string;
  healthCheckURL: string;
  hostList: Ihost[];
}
export interface Ihost{
  hostID: string;
  port: number;
  domain?: string;
}

Интерфейсный объект

  IHostsOb: Ihost[] = [{
    hostID: '',
    port: null,
    domain: ''
  }];
  IAppOnboardOb : IAppOnboard ={
    appName: '',
    appGroup: '',
    appType: '',
    config: [],
    dashboard: '',
    healthCheckURL: '',
    hostList: this.IHostsOb
  };

В итоге я определил инициализацию интерфейсного объекта вышеописанным способом, но почему-то это кажется неправильным и вызывает проблемы.Могу ли я получить помощь здесь?

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

РЕДАКТИРОВАТЬ

Сомнение пришло мне в голову, потому что я столкнулся с ошибкой:

this.onboardingService.getOnboardingDashboardData(this.dlArray).subscribe((res: any) => {
    const selectedApp = res.applications.find(application => application.appName === app);
    if(selectedApp){
        let k;
        this.IHostsOb = selectedApp.hostList;
        this.IAppOnboardOb.config = selectedApp.hostList[0].config;
        for(k in selectedApp.hostList){
this.addHostPort(selectedApp.hostList[k].hostID,selectedApp.hostList[k].port,selectedApp.hostList[k].hostID.domain)  //This line  Works Fine
            this.IHostsOb[k].hostID = selectedApp.hostList[k].hostID;
            this.IHostsOb[k].port = selectedApp.hostList[k].port;
            this.IHostsOb[k].domain = selectedApp.hostList[k].domain;
            this.IAppOnboardOb.hostList.push(selectedApp.hostList[k]);
        }
    }
}

Вышеприведенная функция присваивает всем элементам объекта в массиве одинаковые значения.

Пример: IAppOnboardOb hostlist становится таким:

"hostList": [
    {
      "hostID": "host1",
      "port": 8080,
      "domain": "sampletmxdomain"
    },
    {
      "hostID": "host1",
      "port": 8080,
      "domain": "sampletmxdomain"
    }]

NB selectedApp имеет структуру аналогичную длячто интерфейса определено.не то же самое.

Answer 1

Интерфейс и способ создания объектов кажутся мне подходящими. Если вы укажете характер вашей проблемы, было бы здорово. Между тем, я заметил две вещи:

• рекомендуется вызывать интерфейсы в CamelCase с I впереди. Может быть, это опечатка, но я бы назвал интерфейс IHost, а не Ihost;

• сравнил JSON, который вы показали в вопросе, свойство env отсутствует в созданном вами интерфейсе Ihost;

(Я хотел ответить на ваш вопрос с комментарием, но у меня нет необходимой репутации)

Answer 2

Ваша декларация интерфейсов верна.

Посмотрите на: https://jsfiddle.net/csan7L81/

 const iHostsOb: Ihost[] = [{
    hostID: '',
    port: null,
    domain: ''
  }];
  const iAppOnboardOb: IAppOnboard = {
    appName: '',
    appGroup: '',
    appType: '',
    config: [],
    dashboard: '',
    healthCheckURL: '',
    hostList: iHostsOb
  };