REST APIの複雑な応答からのTypescriptインターフェイス

Question

タイプスクリプトでVSTS APIからの応答を処理する方法に苦労します。

このインターフェイスを処理する方法はありますか？私はループに試してみる私のコードで

export interface Fields { 
'System.AreaPath': any; 

'System.TeamProject': string; 
'System.IterationPath': string; 
'System.WorkItemType': string; 
'System.State': string; 
'System.Reason': string; 
'System.AssignedTo': string; 
'System.CreatedDate': Date; 
'System.CreatedBy': string; 
'System.ChangedDate': Date; 
'System.ChangedBy': string; 
'System.Title': string; 
'Microsoft.VSTS.Feedback.ApplicationType': string; 
'System.Description': string; 
'System.History': string; 
'Microsoft.VSTS.Feedback.ApplicationStartInformation': string; 
'Microsoft.VSTS.Feedback.ApplicationLaunchInstructions': string; 
} 

フィールド（作業項目===フィールド）

 <tbody> 
     <tr *ngFor="let workitem of workItems"> 
      <!-- *ngFor="let field of workitems.fields" --> 
      <td>{{workitem.fields.System.AreaPath}} << THIS IS NOT ALLOWED</td> 
     </tr> 

     </tbody> 

はいずれも、これを解決する方法を素晴らしいアイデアを得ましたか。

Answer 1

まず、オブジェクトに対してngForを使用することはできません。

第2に、workItemsがFields型の場合、その属性の1つを表示するためのループは必要ありません。必要なのは、単にJavaScriptや活字体のように、

workItems['System.AreaPath'] 

Answer 2

{{ workitem.fields['System.AreaPath'] }}

作品はありますか？

Answer 3

@elzoyのおかげと@JB Nizetあり、それはインターフェースのプロパティは「複雑」であるとき、私が必要[「System.AreaPath」]ということでした。私は実際にC＃[JsonProperty]のようなタイプスクリプトでいくつかのデコレータが欠けています。しかし、これは素晴らしい作品です。

たくさんありがとう - あなたが私を助けた前に時間が無駄でした。 :)

 <tbody> 
     <tr *ngFor="let workitem of workItems"> 

      <td>{{workitem.fields['System.AreaPath']}}</td> 
     </tr> 
     </tbody> 


export interface Fields { 

'System.AreaPath': string; 

'System.TeamProject': string; 
'System.IterationPath': string; 
'System.WorkItemType': string; 
'System.State': string; 
'System.Reason': string; 
'System.AssignedTo': string; 
'System.CreatedDate': Date; 
'System.CreatedBy': string; 
'System.ChangedDate': Date; 
'System.ChangedBy': string; 
'System.Title': string; 
'Microsoft.VSTS.Feedback.ApplicationType': string; 
'System.Description': string; 
'System.History': string; 
'Microsoft.VSTS.Feedback.ApplicationStartInformation': string; 
'Microsoft.VSTS.Feedback.ApplicationLaunchInstructions': string; 
} 

export interface WorkItemFullInformation { 
id: number; 
rev: number; 
fields: Fields; 
url: string; 

}

export interface FetchWorkItemRootObject { 
count: number; 
value: WorkItemFullInformation[]; 

}