当我从 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>{{ p.jobTitle.jobTitleName }}</td>

Answer 2

代码中的所有内容都没有问题，唯一的问题是该属性jobTitle是Object

您有 3 个可用选项（或更多）

选项1

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

    export interface IEmployee {

        userId: any;

        firstName: string;

        jobTitle: string;

        lastName: String;

    }

选项2

更改接口以反映Object来自后端的

    export interface IEmployee {

        userId: any;

        firstName: string;

        jobTitle: { jobTitleName: string; jobTitleId: number };

        lastName: String;

    }

现在您可以在您的 html 中使用它，如下所示。这种方法已由@shehanpathirathna 阐述

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

选项3

用于map生成具有所需结构的新对象

    import { map } from 'rxjs/operators';

    export class VisibilityComponent implements OnInit {

      pmDetails1: IEmployee[];

      constructor(private userService: UserService) {}

      ngOnInit() {

        this.userService.getAllUsers().pipe(

           map(employeea => employees.map(

              (employee) => ({...employee, jobTitle: jobTitle.jobTitleName })

           ))

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

          this.pmDetails1 = pmDetails1;

           console.log(pmDetails1);

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

        });

      }

    }

对于这种特定情况，此选项可能有点过大，但如果对象变得更复杂，则可能非常有帮助

Answer 3

尝试这个 ：

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

    });

  }

}