当我从 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)”

我想在表格的 Role 列中显示 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);
    });
  }
}