API 返回复杂 JSON 需要映射 TypeScript Class

Question

我有一个 API，它返回一个复杂的 JSON，我想使用 HTTPClient 在 Angular-v5 中使用那个 API。我已经成功使用了 API，但问题是当我想提取在 JSON 中序列化的集合并映射到 TypeScript 中的本地数组时，它会抛出本地数组未定义的错误，当我尝试访问时PolicyDetail（这是一个 Typescript class）属性像 policydetail.policyForms 一样导航然后它抛出未定义的错误，并且不能在 HTML 模板中使用，这就是原因。虽然它 PolicyDetail.name 和其他属性有效，但集合除外。

注意：API响应即将到来，我已经在 Swagger 中进行了测试，在 Network tap 中也看到了。

模型来自 API

  public class PolicyDetailViewModel
{
    public string Name { get; set; }
    public string Ref { get; set; }
    public ICollection<PolicyDataViewModel> Purpose { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<PolicyDataViewModel> Objectives { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<DefinitionTermViewModel> Definitions { get; set; } = new List<DefinitionTermViewModel>();
    public ICollection<PolicyReferenceViewModel> References { get; set; } = new List<PolicyReferenceViewModel>();
    public ICollection<PolicyDataViewModel> Policy { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<PolicyDataViewModel> Procedure { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<FormViewModel> Forms { get; set; } = new List<FormViewModel>();
    public string SupportingInformation { get; set; }
    public ICollection<PolicyDataViewModel> Outstanding { get; set; } = new List<PolicyDataViewModel>();
    public ICollection<int> SelectedPackages { get; set; } = new List<int>();
    public ICollection<int> SelectedRegions { get; set; } = new List<int>();
    public bool AnyChanges { get; set; }
    public bool IsNewPolicy { get; set; }
}

TypeScript Class

export class PolicyDetail extends AuditableBase
{
name:string;
ref:string;
policyInfo:string;
keyFactsForStaff: string;

policyDataDetails: Array<PolicyDataDetail> = new Array<PolicyDataDetail>(); 
policyDefinitionTerms: Array<PolicyDefinitionTerm>= new Array<PolicyDefinitionTerm>();
policyreferences: Array<PolicyReference> = new Array<PolicyReference>();
policyForms: Array<PolicyForm> = new Array<PolicyForm>();

selectedKloes: Array<number> = new Array <number>();
selectedRegions: Array<number> = new Array<number>();
selectedClusters: Array<number> = new Array<number>();
selectedLegislations: Array<number> = new Array<number>();
}

HttpRequest 映射结果到 TypeScript

export class PolicyDetailComponent {
public policy: PolicyDetail = new PolicyDetail();
public forms: Array<PolicyForm> = new Array<PolicyForm>();
public policyId: number;
constructor(private policyDetailSvc: PolicyDetailSvc,
    private router: Router) { }

getPolicyDetail() {
    this.policyDetailSvc.getPolicy(this.policyId).subscribe((result) => {
        this.policy = result,//it works
            this.forms = result.policyForms; // it doesn't
        console.log(result, 'Result - Subscribed'),//it works and shows complete object in JSON
        console.log(this.policy, 'This.Policy- Subscribed'),//it works and shows complete object in JSON
        console.log(this.forms, 'Forms'),//undefined
            console.log(result.policyForms, 'Result Forms'),//undefined
        console.log(result.policyreferences, 'Result References')//undefined
    });
}
}

问题在于映射表单数组和其他集合对象

我尝试使用本地属性形式：PolicyForm[];但它抛出未定义。
我尝试访问 Policy.PolicyForms 但它也抛出 undefined

我觉得我是把Typescript当成C#了，但是不知道哪里出错了。

如果我的问题不清楚，请告诉我，我会解决所有其他疑惑。

Answer 1

正在解析

根据我在你的问题中看到的情况，如果你的响应中有原始 JSON 字符串，你需要将其解析为 JavaScript 对象...

const policyDetail = JSON.parse(result);

如果结果是一个包含 JSON 序列化的字符串，这将起作用。

C# 领域与 TypeScript 领域

您可能会发现的另一个问题是您的 C# class 具有 Name 和 Ref 等名称，因此如果您使用这些名称进行序列化，则需要匹配TypeScript 中的外壳...

this.forms = result.PolicyForms
//                  ^

Answer 2

问题是使用错误的集合名称访问响应，我得到的是 Forms，但我试图使用 PolicyForms 进行访问。因此，我将 PolicyForms 更改为 Forms 并以此类推结束，它运行得非常完美。

 this.forms = result.policyForms;//it was not working because JSON response was coming forms:[], not PolicyForms:[].
this.forms=result.forms;//

API 返回复杂 JSON 需要映射 TypeScript Class

API returning Complex JSON Which Needs to Map TypeScript Class

arrays

json

typescript

angular2-services

angular

正在解析

C# 领域与 TypeScript 领域