无法以角度访问API中的子接口数据。我做错了什么？

Question

新到角7在这里，需要一些帮助。所以我有一个JSON流，如下所示：

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

company.ts & companyaddress.ts:我创建了两个角度界面，如下所示：

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);
  }

company.component.ts:然后调用组件中的服务：

  company: Company;
  constructor(private companyService: CompanyService) {}
  ngOnInit() {
    this.activatedRoute.data.subscribe(data => {
      this.company = data['company'];
    });
  }

现在我的问题是。在组件的HTML中，我可以使用{{company.Name}访问公司名称，但如果我尝试访问CompanyAddress中的任何数据(例如，{company.CompanyAddress.Address1})，则无法这样做。这些财产根本不存在。

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

有更好的方法来完成我想做的事吗？也许可以用相同格式的PUT来轻松地保存更改？什么是最佳做法？

编辑:添加HTML模板代码

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

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

下面是ASP.Net Core2.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);
    }
}

据邮递员说，所有的东西都检查过了。

Answer 1

@ThaKidd KG5ORD，试试这个

我认为您的JSON object可以用于first interface，但是对于child interface数据，它并不是在转换为JSON object。也许它仍然是一个字符串，所以，做一些如下更改

在Component.ts中添加一个方法

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

component.html

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

我曾经回答过类似的question here检查过一次。

Answer 2

在您的服务端和组件端，一切看起来都很好。我认为您会收到这个错误，因为当您导航到您的(模板)页面时，您正在尝试在服务响应之前呈现company变量。

我的预测是你不会在模板端使用*ngIf子句，

例如，，

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

我明天也回答了类似的问题，请check it。希望能帮上忙。

更新：

请试试这个，

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

Answer 3

弄明白了！通过在Produces("application/json")核心API控制器之上添加以下内容，解决了这个问题: ASP.Net

[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);
    }
}

完成此操作后，我将HTML组件更改为：

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

感谢你让我走上了一个糟糕的Json的轨道。这也是在更改之后开始工作的：

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