如何在Angular应用中将对象属性用作HTTP GET请求参数？

Question

我在JSON文件中有Job ＆ Manager对象。 它们通过managerId连接，如下所示：

export interface IJob {
  id: number;
  title: string;
  description: string;
  employeeId?: number;
  managerId: string;
  imageUrl: string;
}


export interface IManager {
  id: number;
  fullName: string;
  email: string;
  phone?: number;
  password: string;
  contactPreference: string;
}

我可以使用下表行显示所有作业的职位名称和经理ID：

<tr *ngFor="let job of jobs">
    <td>{{ job.title }}</td>
    <td>{{job.managerId}}</td>
</tr>

这是打字稿：

getAllJobs(): void {
    this.jobService.getJobs().subscribe(
        jobs => {
            this.jobs = jobs;
        },
        error => this.errorMessage = <any>error
     );
}

现在，我job.managerId显示job.managerId ，而是希望使用该值从Manager对象中读取manager.fullName。

以下是我对此的尝试。

HTML：

<td>{{getManagerId(offer.managerId)}}</td>

打字稿：

ngOnInit() {
  this.managerService.getManagers().subscribe(
    managers => {
      this.allManagers = managers;
    },
    error => this.errorMessage = <any>error
  );

  this.jobService.getJobs().subscribe(
    jobs => {
      this.jobs = jobs;
  },
  error => this.errorMessage = <any>error
  );
}

getManagerId(mId) {
    return this.allManagers.filter(function (obj) {
        return obj.id === mId;
    })[0].fullName;
}

如果仅读取一条记录，则此代码显示manager.fullName 。 但是，我收到此错误消息：

无法读取未定义的属性“ fullName”

并且，如果读取了多个记录，则什么也不显示，并且多次记录以上错误消息。

有人可以告诉我如何使此getManagerId()方法处理多个记录，以及如何摆脱此错误消息吗？

Stackblitz在： https ://stackblitz.com/edit/angular-cy42jm

Answer 1

filteredJobs = [
 {
  'employeeId ':'73','
   employeename':'bar4'
 },
 {
  'employeeId':'45',
  'employeename':'bara'
 },
 ...
]

如果要获取匹配元素的数组，请改用filter()方法：

this.filteredJobs.filter(x => x.employeeId === '45');

这将返回一个对象数组。 如果要获取employeename属性的数组，可以使用map()方法执行此操作：

this.filteredJobs.filter(x => x.employeeId === '45').map(x => x.employeename);

Answer 2

假设

filteredJobs = [
 {
   employeeId: 1,
   employee: undefined,
   title: 'Manager'
 },
 {
   employeeId: 2,
   employee: undefined,
   title: 'Manager'
 }
]

调用this.filteredJobs = this.performFilter(this.listFilter);

this.filteredJobs.forEach(job => 
   this.employeeService.getEmployee(job.employeeId)
        .subscribe(employee => {
            job.employee = employee; 
         })
   );

在.html中

<tbody>
    <tr *ngFor="let job of filteredJobs">
        <td>{{ job.title }}</td>
        <td *ngIf="job.employee">{{ job.employee.name }} </td>
    </tr>
</tbody>

这不是最有效的方法，因为您的服务器将收到很多请求。

如果可以访问“服务器”代码，一种更好的解决方法是在请求工作时返回员工，否则最好看看构建自己的异步管道