如何在 Angular 8 和類型腳本中為對象和對象數組創建接口？

Question

我正在嘗試為對象、對象和對象數組創建一個接口。

示例界面

export interface ErateColumn {
  categories:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

像這樣的示例 API 響應

{
"categories": {
    "Basic Information": [
        { label: "Applicant Type", value: "ApplicantType" },
        { label: "Organization Name", value: "OrganizationName" },
    ],
    "FRN Lineitem": [
        { label: "Monthly_Cost", value: "Monthly_Cost" },
        ],
    "FRN status": [
        { label: "Purpose Type", value: "PurposeType" },

    ]
}
}

Answer 1

您在this._erateColumn.next(columnList)方法中提供的是columnList 。 不知何故， columnList似乎是接口 ErateColumn 的單個對象，而您的 BehaviorSubject 具有 ErateColumn 類型數組。 將其更改為 ErateColumn 或在this._erateColumn.next(columnList)方法中提供數組以使您的代碼工作。

編輯

根據您的新屏幕截圖，它說缺少屬性categories ，因此可以像這樣將其設為可選

export interface ErateColumn {
  categories?:{
    [key:string]:column[]
  }
}

interface column {
  label:string
  value:string
}

或提供類別。

Answer 2

可能這種方法可以幫助某人

您可以將JSON轉換為 typescript 的類或接口，使用在線工具json2ts或者如果您使用的是vs 代碼（Visual Studio），請使用此擴展QuickType - Paste JSON as Code

注意：你的 JSON 應該是一個有效的 JSON 否則你會得到錯誤

Answer 3

希望這可以幫助...

interface User {
   name: string;
   phone: string;
}

const user: User ==> Object

const usersList: User[] ===> Array of Objects