键入“可观察<{} | Employee>' 不能分配给类型 'Observable<Employee>'答案

【问题标题】：Type 'Observable<{} | Employee>' is not assignable to type 'Observable<Employee>'键入“可观察<{} | Employee>' 不能分配给类型 'Observable<Employee>'
【发布时间】：2019-03-14 00:52:16
【问题描述】：

我尝试了以下代码，但在 employee.service.ts 中遇到了以下问题，我提到了许多堆栈溢出，但我找不到确切的解决方案

这是我的代码

employee.ts

export class Employee {
  public empId: number;
  public empName: string;
  public empEmail: string;
  public empMobile: number;
  public empDob: string;
  public empExpertise: string;
  public empAddress: string;
  public empBloodGroup: string;
  public empAge: number;
  public totalYrsExp: number;
  public listAcademic: Academics[];
  public listExperience: Experience[];
}
class Academics {
  instName: string;
  degree: string;
  percentage: string;
  startDate: string;
  endDate: string;
}
class Experience {
  companyName: string;
  designation: string;
  startDate: string;
  endDate: string;
}

assets/employee.json

[
  {
    "empId": 1,
    "empName": "prads",
    "empEmail": "me@gmail.com",
    "empMobile": "946567457",
    "empDob": "01/01/1992",
    "empExpertise": "test",
    "empAddress": "Che- 41",
    "empBloodGroup": "A+",
    "empAge": 26,
    "totalYrsExp": 3.4,
    "listAcademic": [
      {
        "instName": "Jaya",
        "degree": "B.E",
        "percentage": "7.4%",
        "startDate": "01/08/2010",
        "endDate": "15/04/2014"
      }
    ],
    "listExperience": [
      {
        "companyName": "Alti",
        "designation": "sen enginerr",
        "startDate": "25/11/2018",
        "endDate": "Current"
      },
      {
        "companyName": "TCS",
        "designation": "enginerr",
        "startDate": "22/6/2017",
        "endDate": "15/11/2018"
      }
    ]
  },
  {
    "empId": 6,
    "empName": "Dinesh",
    "empEmail": "me@gmail.com",
    "empMobile": "944567457",
    "empDob": "01/01/1992",
    "empExpertise": "test",
    "empAddress": "Che- 41",
    "empBloodGroup": "A+",
    "empAge": 26,
    "totalYrsExp": 3.4,
    "listAcademic": [
      {
        "instName": "Jaya",
        "degree": "B.E",
        "percentage": "7.4%",
        "startDate": "01/08/2010",
        "endDate": "15/04/2014"
      }
    ],
    "listExperience": [
      {
        "companyName": "Alti",
        "designation": "sen enginerr",
        "startDate": "25/11/2018",
        "endDate": "Current"
      },
      {
        "companyName": "TCS",
        "designation": "enginerr",
        "startDate": "22/6/2017",
        "endDate": "15/11/2018"
      }
    ]
  }
]

employee.service.ts

import { throwError as observableThrowError, Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Employee } from './model/employee';
import { tap, catchError } from 'rxjs/operators';

@Injectable()
export class EmployeeService {

  private url = '../../../assets/employee.json';

  constructor(private http: HttpClient) { }

  getEmployees(): Observable<Employee> {
    return this.http.get<Employee>(this.url)
      .pipe(tap(data => console.log(JSON.stringify(data))), catchError(this.errorHandler))
  }
  errorHandler(error: HttpErrorResponse) {
    return observableThrowError(error.message || 'Server Error');
  }

}

employee.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from './model/employee';
import { EmployeeService } from './employee.service';
@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  employeeDetail: Employee;
  errorMessage;
  constructor(private employeeService: EmployeeService) {

  }


  ngOnInit(): void {
    this.employeeService.getEmployees()
      .subscribe(res => {
        this.employeeDetail = res;
        console.log(this.employeeDetail);
      }, error => console.log(error));
  }


}

【问题讨论】：

如果你映射到Employee（即使已经是），你还有问题吗？
一旦你console.log数据确保你也返回data（返回数据；）

标签： angular typescript angular6 observable angular7

【解决方案1】：

这是因为服务中的catchError()。 tap() 运算符简单地返回它输入的任何内容，并可能捕获 HttpErrorResponse 或 {}

所以，

1 =>

getEmployees(): Observable<Employee> {
return this.http.get<Employee>(this.url)
  .pipe(tap(data => console.log(JSON.stringify(data)))
}

=> 或者干脆

getEmployees(): Observable<Employee> {
    return this.http.get<Employee>(this.url);
}

2 =>

getEmployees(): Observable<Employee | {}> {
return this.http.get<Employee>(this.url)
  .pipe(tap(data => console.log(JSON.stringify(data))), catchError(this.errorHandler))
}
errorHandler(error: HttpErrorResponse) {
   return observableThrowError(error.message || 'Server Error');
}

然后在你的subscribe()中进行类型转换

ngOnInit(): void {
this.employeeService.getEmployees()
  .subscribe(res => {
    this.employeeDetail = res as Employee ;
    console.log(this.employeeDetail);
  }, error => console.log(error));
}

【讨论】：