如何訪問 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 ，看看這些數據是否真的實現了這些接口。