如何访问 typescript 接口属性数组？

Question

如果我有这样的三个接口：

注册-pivot.ts

export interface RegistrationPivot {
    THead: RegistrationPivotRow;
    TBody: RegistrationPivotRow[];
}

注册-pivot-row.ts

export interface RegistrationPivotRow {
    CellList: RegistrationPivotCel[];
}

注册-pivot-cel.ts

export interface RegistrationPivotCel {
    content: string;
}

Okay say now that I call a get API and put the object from the API to registrationPivot (also what do you call that: a property? a list? an empty object?):

registrationPivot: RegistrationPivot = {} as RegistrationPivot;

searchRegistrationStatistic(){
    this.registrationApi.getAllRegistrationStatistic().subscribe(res => {
    this.registrationPivot = res;
    });
}

在我的 html 如何从registrationPivot获取值？

• 我尝试做registrationPivot.THead.CellList ，但这不起作用。
• 基本上我必须遍历 THead 元素内的所有单元格（与 TBody 相同），但是使用我拥有的代码我不知道如何实现它。 有人可以帮我理解怎么做吗？ 谢谢！

Answer 1

您的接口和访问由此类接口定义的数据的方式 - 是正确的。 正如您在下面的示例中看到的（我已经在JSFiddle上的浏览器中运行它）。

interface RegistrationPivotCel {
  content: string;
}

interface RegistrationPivotRow {
  CellList: RegistrationPivotCel[];
}

interface RegistrationPivot {
  THead: RegistrationPivotRow;
  TBody: RegistrationPivotRow[];
}

const example = {
    THead: {
    CellList: [
      {content: "title"}
    ]
  },
  TBody: [
    {
      CellList: [
        {content: "row A"},
        {content: "row B"}
      ]
    }
  ]
}

console.log(example.THead.CellList)
/*
[
  {
    "content": "title"
  }
]
*/

您从this.registrationApi.getAllRegistrationStatistic()返回的数据可能没有实现这些接口。 甚至尝试console.log你的res ，看看这些数据是否真的实现了这些接口。