I am running into an error when implementing a model in angular:

the component.ts:

import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
import { Router } from '@angular/router';
import { Report } from 'src/app/models/report.model';

@Component({
  selector: 'app-fa-daform',
  templateUrl: './fa-daform.component.html',
  styleUrls: ['./fa-daform.component.css']
})
export class FADAFormComponent implements OnInit {


  constructor(private damageAssessmentReportService : DamageAssessmentReportService, private router: Router) { }

  createDamageAssessmentReport(assessmentDescription: string, author: string, reportDateString: string){

    const reportDateTime = new Date(reportDateString);
    this.damageAssessmentReportService.createDAReport(assessmentDescription,author, reportDateTime).subscribe((report : Report)=>{
      console.log(report);
      //navigate to /damageAssessments/damageAssessments._id
      this.router.navigate(['/detailed-daforms', report._id])
  })
  }

  
  ngOnInit(): void {
  }

  }

and the model.ts:

export class Report{
    _id: string ="";
    assessmentDescription: string = "";
    author: string = "";
    reportDateTime: Date = new Date("");
}

The error presented:

error TS2769: No overload matches this call. Overload 1 of 3, '(observer?: Partial<Observer> | undefined): Subscription', gave the following error. Type '(report: Report) => void' has no properties in common with type 'Partial<Observer>'. Overload 2 of 3, '(next: (value: Object) => void): Subscription', gave the following error. Argument of type '(report: Report) => void' is not assignable to parameter of type '(value: Object) => void'. Types of parameters 'report' and 'value' are incompatible. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is missing the following properties from type 'Report': _id, assessmentDescription, author, reportDateTime
Overload 3 of 3, '(next?: ((value: Object) => void) | null | undefined, error?: ((error: any) => void) | null | undefined, complete?: (() => void) | null | undefined): Subscription', gave the following error. Argument of type '(report: Report) => void' is not assignable to parameter of type '(value: Object) => void'. Types of parameters 'report' and 'value' are incompatible. Type 'Object' is not assignable to type 'Report'. The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?

22
this.damageAssessmentReportService.createDAReport(assessmentDescription,author, reportDateTime).subscribe((report : Report)=>{

                                     ~~~~~~~~~~~~~~~~~~~~

× Failed to compile.

createDAReport method from DamageAssessmentReportService

createDAReport(assessmentDescription: string, author: string, reportDateTime: Date){
    //send web req to create DA report
    return this.webReqService.post('DamageAssessments', {assessmentDescription, author, reportDateTime})
  }

webReqService:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class WebRequestService {

  readonly ROOT_URL;

  constructor(private http: HttpClient) {
    this.ROOT_URL= 'http://localhost:3000';
  }
  
  get(uri: string) {
    return this.http.get(`${this.ROOT_URL}/${uri}`)
  }

  

post(uri: string, payload: Object) { return this.http.post(${this.ROOT_URL}/${uri}, payload); }

patch(uri: string, payload: Object) { return this.http.patch(${this.ROOT_URL}/${uri}, payload); }

delete(uri: string) { return this.http.delete(${this.ROOT_URL}/${uri}); }

}

CodePudding user response：

From the existing code and error message, as you want to get the Observable of T, would suggest you use Overload #15 for Angular - HttpClient (Post) by specifying the T type.

post<T>(url: string, body: any, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; context?: HttpContext; observe?: "body"; params?: HttpParams | { [param: string]: string | number | boolean | readonly (string | ... 1 more ... | boolean)[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }): Observable<T>

WebRequestService

You can do similar as what Angular handle for HttpClient methods, by using function overloading.

post<T>(uri: string, payload: Object): Observable<T>;
post(uri: string, payload: Object): Observable<any> {
  return this.http.post<any>(`${this.ROOT_URL}/${uri}`, payload);
}

DamageAssessmentReportService

createDAReport(assessmentDescription: string, author: string, reportDateTime: Date): Observable<Report>{
  //send web req to create DA report
  return this.webReqService.post<Report>('DamageAssessments', {assessmentDescription, author, reportDateTime})
}