当我从 API 检索数据但它在 Angular 中显示为对象时

Question

当我从 API 检索数据时，会显示“名字”和“姓氏”值。但“jobTitle”值未显示在表中，但它在控制台框中显示为数组。请帮我解决这个问题

这是visibility.ts文件：

export class VisibilityComponent implements OnInit {

  pmDetails1: IEmployee[];

  constructor(private userService: UserService) {}

  ngOnInit() {

    this.userService.getAllUsers().subscribe((pmDetails1: IEmployee[]) => {

      this.pmDetails1 = pmDetails1;

       console.log(pmDetails1);

       console.log(pmDetails1[0].jobTitle);

    });

  }

}

这是 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>

这是IEmployee.ts文件

export interface IEmployee {

    userId: any;

    firstName: string;

    jobTitle: any;

    lastName: String;

}

这是输出：

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

这是“console.log(pmDetails1)”

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

这是“console.log(pmDetails[0].jobTitles)”

我想在表的“角色”列中显示 jobTitlesName。我是 Angular 的初学者。请帮我做

Answer 1

在您的 HTML 文件中使用它。<td>{{&nbsp;p.jobTitle.jobTitleName&nbsp;}}</td>

Answer 2

代码中的所有内容都没有问题，唯一的问题是该属性jobTitle是Object您有 3 个可用选项（或更多）选项1从后端以字符串形式返回值；这意味着我们可以将您的界面修改为&nbsp; &nbsp; export interface IEmployee {&nbsp; &nbsp; &nbsp; &nbsp; userId: any;&nbsp; &nbsp; &nbsp; &nbsp; firstName: string;&nbsp; &nbsp; &nbsp; &nbsp; jobTitle: string;&nbsp; &nbsp; &nbsp; &nbsp; lastName: String;&nbsp; &nbsp; }选项2更改接口以反映Object来自后端的&nbsp; &nbsp; export interface IEmployee {&nbsp; &nbsp; &nbsp; &nbsp; userId: any;&nbsp; &nbsp; &nbsp; &nbsp; firstName: string;&nbsp; &nbsp; &nbsp; &nbsp; jobTitle: { jobTitleName: string; jobTitleId: number };&nbsp; &nbsp; &nbsp; &nbsp; lastName: String;&nbsp; &nbsp; }现在您可以在您的 html 中使用它，如下所示。这种方法已由@shehanpathirathna 阐述<td>{{ p.jobTitle.jobTitleName }}</td>选项3用于map生成具有所需结构的新对象&nbsp; &nbsp; import { map } from 'rxjs/operators';&nbsp; &nbsp; export class VisibilityComponent implements OnInit {&nbsp; &nbsp; &nbsp; pmDetails1: IEmployee[];&nbsp; &nbsp; &nbsp; constructor(private userService: UserService) {}&nbsp; &nbsp; &nbsp; ngOnInit() {&nbsp; &nbsp; &nbsp; &nbsp; this.userService.getAllUsers().pipe(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;map(employeea => employees.map(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (employee) => ({...employee, jobTitle: jobTitle.jobTitleName })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;))&nbsp; &nbsp; &nbsp; &nbsp; ).subscribe((pmDetails1: IEmployee[]) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.pmDetails1 = pmDetails1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(pmDetails1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(pmDetails1[0].jobTitle);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }对于这种特定情况，此选项可能有点过大，但如果对象变得更复杂，则可能非常有帮助

Answer 3

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