带有嵌套数组的 Angular 接口(interface)

标签 angular typescript

我是 Angular 的新手,我来自 Java,所以我习惯于将类设置为我的数据的数据结构。经过一些研究,我了解到我应该使用接口(interface),但我在弄清楚如何使用嵌套数组设置接口(interface)时遇到了问题。每个数组只是用于创建表的字段/标题对。该对象将是它们的数组。但是我有两个表,它们有两行标题,我正在尝试弄清楚如何构建界面。

interface TableHeaderDetails {
    field: string;
    header: string;
    date?: <what goes here>;
}

forecastCol: TableHeaderDetails[];

this.forecastCol = [
    { field: 'cumulativeExpected', header: 'Cumulative Expected ' },
    { field: 'cumulativeReceived', header: 'Cumulative Received' },
    { date : [
        { field: 'forecastYearMonth', header: 'Year - Month' },
            { details: [
                { field: 'expected', header: 'Expected' },
                { field: 'received', header: 'Received' }
            ]}
    ]}
];

最佳答案

您可以使用 json2ts帮助站点将您的 JSON 对象转换为如下所示的接口(interface),

declare module namespace {

    export interface Detail {
        field: string;
        header: string;
    }

    export interface Date {
        field: string;
        header: string;
        details: Detail[];
    }

    export interface RootObject {
        field: string;
        header: string;
        date: Date[];
    }

}

关于带有嵌套数组的 Angular 接口(interface),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54967853/

相关文章:

html - 如何使功能成为指令,我必须在其他组件中使用它

javascript - Angular 5 组件需要一个参数

javascript - 按自定义 Angular 数据表中的列进行过滤

javascript - this.router 在 AngularJS 2 中未定义

javascript - 使用 typescript 枚举并对期望字符串 Prop 使用react

javascript - Angular 中的两种方式数据绑定(bind)不起作用

javascript - React Typescript - 动态类型

node.js - 如何保证最新的写入不会被之前的写入覆盖

javascript - Angular 2 管道依赖注入(inject)

javascript - 添加新参数后发生错误