键入'Observable <{} | Employee>'不可分配给'Observable <employee>'类型

Question

我尝试了以下代码，但是在我的 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));
  }


}

Answer 1

这是因为该服务中的ejabberd.yml。 [{ping_interval,60}, {ping_ack_timeout,32000}, {send_pings,true}, {timeout_action,kill}] 操作符仅返回其进入的任何内容，并可能捕获catchError()或tap()

所以

1 =>

HttpErrorResponse

=>或简单地

{}

2 =>

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

中键入

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