时间戳

首页 > 解决方案 > 无法从 Angular 的 API 访问子接口数据。我究竟做错了什么？

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

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 Studio Code，它没有显示 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);
    }
}

根据 Postman 的说法，一切都结束了。

标签： jsonangularinterface

解决方案

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

我的预测是您没有*ngIf在模板方面使用子句，

例如，

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

我明天已经回答了类似的问题，请检查一下。希望能帮助到你。

更新：

请试试这个，

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

推荐阅读