Тип 'Наблюдаемый <{} | Сотрудник> 'нельзя назначить типу' Наблюдаемый <Employee>' - PullRequest
Новая
       10

Тип 'Наблюдаемый <{} | Сотрудник> 'нельзя назначить типу' Наблюдаемый <Employee>'

0 голосов
/ 13 марта 2019

Я попробовал следующий код, но в моем employee.service.ts я обнаружил следующую проблему, я сослался на переполнение стека, но не смог найти точное решение

enter image description here

Вот мой код

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

активы / 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));
  }


}

1 Ответ

1 голос
/ 13 марта 2019

Это из-за этого 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));
}
...