Javascript 当我从API中检索数据，但它以对象的形式显示时

当我从API中检索数据时，将显示firstname和lastname值。但jobTitle值未显示在表中，但在控制台框中显示为数组。请帮我解决这个问题

以下是visibility.ts文件：

这是HTML文件

<div>
          <cdk-virtual-scroll-viewport itemSize="50" class="dialogbox-viewport">
            <table class="table table-light" style="border: 1px solid">
              <thead style="background-color: aqua">
                <tr>
                  <th>Select</th>
                  <th>Name</th>
                  <th>Role</th>
                </tr>
              </thead>

              <tbody>
                <tr *ngFor="let p of pmDetails1">
                  <td>
                    <input type="checkbox" value="{{p.firstName}}" (change) = "onSelectedEmployee($event)" [checked]="check" /> 
                  </td>
                  <td>{{ p.firstName }} {{ p.lastName }}</td>
                  <td>{{ p.jobTitle }}</td>
                </tr>
              </tbody>
            </table>
          </cdk-virtual-scroll-viewport>
        </div>

以下是输出：

!！[在此处输入图像描述][1]

这是console.logpmDetails1

!！[在此处输入图像描述][2]

这是控制台。logpmDetails[0]。作业标题

我想在表中的Role列中显示JobTitleName。我是个初学者。请帮我做

试试这个：

export class VisibilityComponent implements OnInit {
  pmDetails1: IEmployee[];
  constructor(private userService: UserService) {}
  ngOnInit() {
    this.userService.getAllUsers().subscribe(data => {
      this.pmDetails1 = data;
       console.log(pmDetails1);
       console.log(pmDetails1[0].jobTitle);
    });
  }
}

试试这个：

export class VisibilityComponent implements OnInit {
  pmDetails1: IEmployee[];
  constructor(private userService: UserService) {}
  ngOnInit() {
    this.userService.getAllUsers().subscribe(data => {
      this.pmDetails1 = data;
       console.log(pmDetails1);
       console.log(pmDetails1[0].jobTitle);
    });
  }
}

---

在HTML文件中使用此选项

<td>{{ p.jobTitle.jobTitleName }}</td>

---

在HTML文件中使用此选项

<td>{{ p.jobTitle.jobTitleName }}</td>

---

代码中的一切都正常，唯一的问题是属性jobTitle是一个对象

您有3个或更多可用选项

选择1 从后端以字符串形式返回值； 这意味着我们可以将您的界面修改为

导出接口IEEmployee{ userId:any； 名字：字符串； 职位名称：字符串； lastName:String； } 选择2 更改接口以从后端反映对象

导出接口IEEmployee{ userId:any； 名字：字符串； jobTitle:{jobTitleName:string；jobTitleId:number}； lastName:String； } 在您的html中，您现在可以如下所示使用它。@shehanpathirathna已经说明了这种方法

{p.jobTitle.jobTitleName} 选择3 使用“贴图”生成具有所需结构的新对象

从“rxjs/operators”导入{map}； 导出类VisibilityComponent在NIT上实现{ pmDetails1:i员工[]； constructorprivate userService:userService{} 恩戈尼特{ this.userService.getAllUsers.pipe mapemployeea=>employees.map employee=>{…employee，jobTitle:jobTitle.jobTitleName} .subscribepmDetails1:i员工[]=>{ this.pmDetails1=pmDetails1； console.logpmDetails1； console.logpmDetails1[0]。作业标题； }; } }

---

对于这种特定情况，此选项可能有些过分，但如果对象变得更复杂，则会非常有用。代码中的所有内容都正常，唯一的问题是属性jobTitle是一个对象

您有3个或更多可用选项

选择1 从后端以字符串形式返回值； 这意味着我们可以将您的界面修改为

导出接口IEEmployee{ userId:any； 名字：字符串； 职位名称：字符串； lastName:String； } 选择2 更改接口以从后端反映对象

导出接口IEEmployee{ userId:any； 名字：字符串； jobTitle:{jobTitleName:string；jobTitleId:number}； lastName:String； } 在您的html中，您现在可以如下所示使用它。@shehanpathirathna已经说明了这种方法

{p.jobTitle.jobTitleName} 选择3 使用“贴图”生成具有所需结构的新对象

从“rxjs/operators”导入{map}； 导出类VisibilityComponent在NIT上实现{ pmDetails1:i员工[]； constructorprivate userService:userService{} 恩戈尼特{ this.userService.getAllUsers.pipe mapemployeea=>employees.map employee=>{…employee，jobTitle:jobTitle.jobTitleName} .subscribepmDetails1:i员工[]=>{ this.pmDetails1=pmDetails1； console.logpmDetails1； console.logpmDetails1[0]。作业标题； }; } }

---

对于这种特定情况，此选项可能有些过分，但如果对象变得更复杂，则会非常有用

谁在后端创建了该对象？根据您的图像，jobTitles不是一个数组，而是一个具有多个属性的对象。那么，您希望如何为视图字符串化该对象？谁在后端创建了该对象？根据您的图像，jobTitles不是一个数组，而是一个具有多个属性的对象。那么，您想如何为您的视图字符串化该对象？什么？为什么？仅仅因为你称胡萝卜为香蕉，这并不会改变它是什么？为什么？仅仅因为你称胡萝卜为香蕉，这并不会改变它的本质。在HTML{{p.jobTitle.jobTitleName}中，我也在写同样的答案，但欧文·开尔文在我之前发布了它。这是你面临的这个问题的完美解决方案。谢谢@YisalKhanI也写了同样的答案，但欧文·开尔文在我之前发布了它。这是你面临的这个问题的完美解决方案。谢谢@YisalKhan