Json 无法从angular中的API访问子接口数据。我做错了什么？

刚接触Angular 7，需要一些帮助。因此，我有一个JSON流，如下所示：

{
    "Id": 25,
    "Name": "XYZ Corp",
    "CompanyAddresses": [
        {
            "Id": 39,
            "CompanyId": 25,
            "Address1": "998 Roosevelt Court",
            ...
        }
    ]
}

company.ts和companyaddress.ts：我在Angular中创建了两个接口，如下所示：

import { CompanyAddresses } from './company-address';
export interface Company {
    Id: number;
    Name: string;
    CompanyAddress: CompanyAddress[];
}
export interface CompanyAddress {
    Id: number;
    CompanyId: number;
    Address1: string;
}

company.service.ts：然后我使用一个服务填充接口，如下所示：

  getCompany(id): Observable<Company> {
    return this.http.get<Company>(this.baseUrl + 'company/' + id, httpOptions);
  }

现在我的问题来了。在我的组件的HTML中，我可以使用{{company.name}}访问公司名称，但是如果我试图访问CompanyAddress中的任何数据，如so{{company.CompanyAddress.Address1}，则无法访问。这些属性不存在

在将JSON数据转储到公司接口之前，是否需要在某个时刻初始化CompanyAddress接口

有没有更好的方法来完成我想做的事情？也许可以用相同格式的PUT将更改保存回原处？什么是最佳实践

编辑：添加了HTML模板代码

<div><h3>{{company.Name}}</h3>
<p>
    <div *ngFor="let addy of company.CompanyAddress">
        {{addy.Address1}}
    </div>
</p>    
</div>

{{company.Name}

{{addy.Address1}}

我还应该提到，我使用的是Visual Studio代码，它没有显示CompanyAddress内部的任何属性

以下是ASP.Net Core 2.1控制器代码：

[Authorize]
[Route("api/[controller]")]
[ApiController]
public class CompanyController : ControllerBase
{
    [HttpGet("{id}")]
    public async Task<IActionResult> Company(int id)
    {
        var company = await _repo.GetCompany(id);
        var companyToReturn = _mapper.Map<CompanyForContactDto>(company);
        return Ok(companyToReturn);
    }
}

[授权]
[路由（“api/[控制器]”）]
[ApiController]
公共类公司控制器：ControllerBase
{
[HttpGet（“{id}”）]
公共异步任务公司（int id）
{
var company=等待回购公司（id）；
var companyToReturn=\u mapper.Map（公司）；
返回Ok（CompanyReturn）；
}
}

---

据邮递员说，一切正常。

您的服务端和组件端看起来都很好。我认为您会遇到这个错误，因为当您导航到（模板）页面时，您试图在服务响应之前呈现

公司

变量

我的预测是，您没有在模板端使用

*ngIf

子句

例如，

<div *ngIf="emp1">
  Id:{{emp1.id}} Name: {{emp1.name}}
</div>
<div *ngIf="emp2">
  Id:{{emp2.id}} Name: {{emp2.name}}
</div>  

Id:{{emp1.Id}}名称：{{emp1.Name}
Id:{{emp2.Id}}名称：{{emp2.Name}

我明天已经回答了类似的问题。 希望能有帮助

更新：

请试试这个

<div *ngIf="company && company.CompanyAddress">
 <h3>{{company.Name}}</h3>
  <p>
    <div *ngFor="let addy of company.CompanyAddress">
        {{addy.Address1}}
    </div>
  </p>    
</div>

{{company.Name}

{{addy.Address1}}

@ThakidKG5ORD，试试这个

我认为您的

JSON对象

对于

第一个接口

来说是不错的，但是对于

子接口

数据，它不会转换为

JSON对象

。也许它仍然是一个字符串，所以，做一些如下更改

在组件ts中添加方法

component.html

{{addy.Address1}}

---

我已经回答过类似的问题，检查过一次。

弄明白了！通过在ASP.Net核心API控制器上添加以下内容，问题得以解决：[products（“application/json”）]

[Authorize]
[Produces("application/json")]
[Route("api/[controller]")]
[ApiController]
public class CompanyController : ControllerBase
{
    [HttpGet("{id}")]
    public async Task<IActionResult> Company(int id)
    {
        var company = await _repo.GetCompany(id);
        var companyToReturn = _mapper.Map<CompanyForContactDto>(company);
        return Ok(companyToReturn);
    }
}

---

请添加模板代码。请添加模板代码和

this.company

对象的值。

company.CompanyAddress.Address1

，在这里，CompanyAddress是一个数组，所以你不应该像company.CompanyAddress[index].Address1那样访问它吗？@emkay我用{{{CompanyAddress[1].Address1}进行了尝试。不幸的是，没有返回任何数据。您是说还没有加载任何数据，这就是什么都没有发生的原因吗？我找回了公司的名字。另一件奇怪的事情是，可视化代码的intellisense也看不到CompanyAddress.properties。@ThakidkG5ORD是的，这就是我真正想的。您能在模板上添加*ngIf符号吗？顺便说一下，我仔细检查了您使用的类。我添加了您推荐的*ngIf语句。什么也装不下。如果我从ngIf中删除company.CompanyAddress，则会加载除地址块（ngFor）之外的所有内容。不幸的是，这并没有解决问题。愚蠢的附带问题…有没有一种方法可以评估公司界面中的数据？实际上，我刚刚注意到我在浏览器中得到了以下信息：ERROR SyntaxError:JSON中的意外标记o位于JSON.parse（）的位置1。不确定这意味着什么，但会用谷歌搜索它。@Thakid KG5ORD，我们需要将数组转换为JSON对象，所以，在ConvertToJSON（）方法

JSON.parse

to

JSON.stringify

更改为stringify中尝试此更改。现在我得到了这个错误：找不到不同的支持对象[{“Id”：22，“CompanyId”：24，“Address1”：“898 green…不错，但您仍然需要使用*ngIf符号：D，否则您将面临不同的问题，祝您好运。

ConvertToJSON(product: any) {
    return JSON.parse(product);
}

<div *ngFor="let addy of ConvertToJSON(company.CompanyAddress)">
        {{addy.Address1}}
</div>

[Authorize]
[Produces("application/json")]
[Route("api/[controller]")]
[ApiController]
public class CompanyController : ControllerBase
{
    [HttpGet("{id}")]
    public async Task<IActionResult> Company(int id)
    {
        var company = await _repo.GetCompany(id);
        var companyToReturn = _mapper.Map<CompanyForContactDto>(company);
        return Ok(companyToReturn);
    }
}

<div><h3>{{company.Name}}</h3>
<p>
    <div *ngFor="let addy of company.CompanyAddress">
        {{addy.Address1}}
    </div>
</p>    
</div>

{{company.CompanyAddress[1].Address1}}