【问题标题】：API returning Complex JSON Which Needs to Map TypeScript ClassAPI 返回需要映射 TypeScript 类的复杂 JSON
【发布时间】：2018-06-04 07:02:34
【问题描述】：

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

注意：API Response 即将到来，我已经在 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 类

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#，但不知道我在哪里犯错。

如果我的问题不清楚，请告诉我，我会解决任何其他困惑。

【问题讨论】：

您不能提供原始 JSON 响应吗？
我有来自 API 的响应到 Angular 应用程序，我可以将 PolicyName 显示到 HTML 模板中，但我想显示 PolicyForms 是一个集合，它成功来自 API，但无法提供给 HTML 模板未定义的错误。
看来您的问题是响应对象的运行时访问不正确，而不是 TypeScript 类型声明（编译时问题）。
@RobertPenner 是的，看来我现在正在测试它。我在 JSON 中有 forms，但尝试使用 policyForms 访问它。我认为这可能是错误的。
@RobertPenner 你是绝对正确的。这就是问题所在。我解决了。

标签： arrays json angular typescript angular2-services

【解决方案1】：

解析

从我在您的问题中可以看出，如果您的响应中有原始 JSON 字符串，则需要将其解析为 JavaScript 对象...

const policyDetail = JSON.parse(result);

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

C# 领域与 TypeScript 领域

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

this.forms = result.PolicyForms
//                  ^

【讨论】：

您建议的解决方案会导致此错误：“'PolicyDetail' 类型的参数不可分配给'字符串”类型的参数。因为我已经使用了带有 Typed 响应的 HttpClient。 httpclient.get();让我添加相关 JSON 响应的快照。
我已经以正确的 JSON 格式序列化并附上包含 JSON 结果的图像。这不是完整的结果，而是向您展示结果的最低限度。

【解决方案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;//

【讨论】：