Question

我的angular7应用程序中有2个对象类，其中填充了数据-员工和公司（数据是通过Web api从数据库接收的）。员工具有字段-emp_id，姓名，姓氏和公司对象。公司有-c_id，company_name，电话。我可以使用“ emp_id”，“ name”和“ surname”在表中显示雇员-emp_id，姓名和姓氏数据，但是当尝试显示雇员公司时，显示的结果是“ [object Object]”，但是我想显示公司名称。

如果从邮递员之类的程序中查看来自Web api的数据，则公司对象将正确显示在员工对象内部。

我尝试使用这些组合来访问公司名称-“ company.company_name”，“ company {company_name}”，“ company（company_name）”，但是这些都不起作用。

这是我的角度学习班

export interface employee
{
emp_id: number;
name: string;
surname: string;
company: Company;
}

export interface company
{
c_id: number;
company_name: string;
phone: string;
}

使用http.get填充对象，并将其保存在数组中

  public apartments:any [];
  public houses:any [];

  getEmployees(): Observable<Employee[]>
{
  return this.http.get<Employee[]>('http://localhost:60962/api/employees');
}
 getCompanies(): Observable<Company[]>
{
  return this.http.get<Company[]>('http://localhost:60962/api/companies');
}

在初始化时订阅

    ngOnInit()
    {
     this.getEmployees()
         .subscribe(data => this.apartments = data);

     this.getCompanies()
         .subscribe(data => this.houses = data);
    }

Answer 1

首先，接口应以大写字母开头：

export interface Employee {
  emp_id: number;
  name: string;
  surname: string;
  company: Company;
}

export interface Company {
  c_id: number;
  company_name: string;
  phone: string;
}

然后只需声明一个这样的对象：

public test: Employee = {
    emp_id: 0,
    name: "test",
    surname: "test2",
    company: {
      c_id: 12,
      company_name: "cmp name",
      phone: "+665589898"
    }
  }

在您的html中，您可以轻松做到：

{{test.name}}
{{test.company.phone}}

在您的代码中，您的interface公司以低位'c'开头，而您在对象中以'C'声明了

工作示例：https://stackblitz.com/edit/angular-joap5a?file=src%2Fapp%2Fapp.component.html

在其他对象类中访问对象的属性

1 个答案: