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的{{1}}变为：

hostlist

NB "hostList": [ { "hostID": "host1", "port": 8080, "domain": "sampletmxdomain" }, { "hostID": "host1", "port": 8080, "domain": "sampletmxdomain" }]具有与定义的接口相似的结构。不一样。

Answer 1

您的接口声明正确。

看看：https://jsfiddle.net/csan7L81/

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

Answer 2

接口和创建对象的方式对我来说似乎很好。如果您指定问题的性质，那就太好了。同时，这是我注意到的两件事：

最好在CamelCase中使用前面的I来调用接口。可能是拼写错误，但我会称呼接口IHost而不是Ihost;
比较了您在问题中显示的JSON，在您创建的env接口中缺少Ihost属性；

（我想通过评论回复您的问题，但我没有必要的声誉）

Angular-声明嵌套的接口对象数组

2 个答案: