Angular 6 does not allow assigning a parameter of type 'void' to a parameter of type 'string' in arguments

Angular Component Function


onFileChangedForCV(event) {
  this.details.= event.target.files[0]
}

candidateDetails() {
    let formData = new FormData();
    let photo= formData.append('profile_pic',this.details.photo);  
    let name=this.details.name;
    let age = this.details.age;
    let cv = this.details.cv;
    let experience = this.details.experience;
    let current_salary = this.details.current_salary;
    let expected_salary = this.details.expected_salary;
    let notice_period = this.details.notice_period;
    
    if (this.contentEditable){
     this.detaisservice.candidateDetailsExperienced(photo(Here throwing ERROR),name,age,cv,experience,current_salary,expected_salary,notice_period)
      .subscribe(
        data => {
            this.details.DetailsResponse = data;
               if(this.details.DetailsResponse.code =='200'){ 
                 }
        },
        error => alert(error),
        () => console.log(this.details.DetailsResponse)
      );
    }
}

Angular Service Function


candidateDetailsFresher(photo:string,name:string,age:string,cv:string){
      let body = JSON.stringify({photo:photo,name:name,age:age,cv:cv});
      let headers = new Headers({ 'Content-Type': 'application/json'});
      let options = new RequestOptions({ headers: headers });
      console.log(body);
      console.log(options);
     
     return this.http.post('http://127.0.0.1:8000/api/seeker/candidate_details/', body, options)
     .map(this.extractData)
     .catch(this.handleError);
   }

private extractData(res: Response) {
      let body = res.json();
      return body || [];   
    }

private handleError (error: any) {
      return Observable.throw(error.json().error || 'Server error');
    }

Error: Argument of type 'void' is not assignable to parameter of type 'string'. It's showing error when I am trying to call API in Angular 6. Please help me resolve this error. For example, let photo = this.details.photo;(it works but I want to send it as FormData).

Answer №1

Understanding the challenge with

let photo = formData.append('profile_pic', this.details.photo);  

The append function in FormData is designed to return void. Therefore, the variable photo ends up being void in this scenario, but candidateDetailsExperienced expects a string.

To rectify this, update the photo variable to be of type string. Consider using this.details.photo instead.

You can split this line

let photo = formData.append('profile_pic', this.details.photo);

into

formData.append('profile_pic', this.details.photo);
let photo = this.details.photo; //<-- feel free to replace it with another string value if necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on validating interconnected strings with the help of yup within a react native environment

In my scenario, I am dealing with two date strings called start_date and end_date. Initially, both of these start off as empty strings: export interface FilterSchema { start_date?: any; end_date?: any; } const initialValues: FilterSchema = { s ...

Experiencing issues while trying to render a component with dynamic content in Next.js

Currently, I am facing an issue while trying to display Leaflet maps in Next.js with Typescript. I came across the suggestion to disable server-side rendering (ssr) to prevent the 'window not defined' error. However, when implementing the followi ...

What is preventing me from running UNIT Tests in VSCode when I have both 2 windows and 2 different projects open simultaneously?

I have taken on a new project that involves working with existing unit tests. While I recently completed a course on Angular testing, I am still struggling to make the tests run smoothly. To aid in my task, I created a project filled with basic examples f ...

Ways to refresh the DOM prior to completion of the change event

I've set up a file input for opening a video and I want to display that video input only if my_variable exists. Here's the HTML code: <input type="file" (change)="handleFileInput($event)" accept="video/mp4"> <div *ngIf="my_variable"> ...

How to implement the ECharts animated bar chart in Angular version 16?

The animated bar chart in ECharts functions perfectly on Stackblitz. You can check it out here in the Stackblitz Angular 16 demo. However, attempting to run the same demo in a local Angular 16 project led to the following errors. Error: src/app/animated- ...

Unlocking an alternative Firestore database in AngularFire

I am encountering an issue while trying to access a different firestore database within my gcloud project. I have successfully accessed the default database, but I am unable to access the 'development' database and cannot find any relevant docume ...

Tips for implementing absolute paths and baseUrl in TypeScript compiler

When I bundle a package using tsc, I am getting incorrect output. Here is the structure of my project directory: common └── index.ts types ├── action.ts ├── index.ts └── request.ts utils ├── event.ts ├── index.ts ├─ ...

Error: Angular SSR does not recognize IDBIndex

Attempting to build my Angular application using the command npm run build:ssr. The application built successfully, but when running the command npm run serve:ssr, I encounter the following error: ReferenceError: IDBIndex is not defined Note: Upon invest ...

Is there a speed advantage in Angular 2+ when using [disabled] instead of "disabled" in a template?

Let's analyze the differences between these two HTML snippets: <input formControlName="address" [disabled]=isDisabled/> <input formControlName="address" disabled={{isDisabled}}/> While it seems that the first option is more readable, I ...

Issue with Angular Unit Test: Provider for WebSocketAPI is missing

I am encountering some failing unit tests in my Angular 10 application due to the following error message: Failed: R3InjectorError(DynamicTestModule)[WebSocketAPI -> WebSocketAPI]: NullInjectorError: No provider for WebSocketAPI! Typically, this type ...

Arranging Alphanumeric Characters in Typescript

Given input -> const s = ['2.1.1.a', '2.1.a', '2.1.1.d', 'A2.2', 'A2.1', 2.1.1.c', '2.1.b', '2.1.1.b'] Expected output after sorting -> const s = ['2.1.a', '2. ...

Fixing the (Missing: any) error in a create-react-app project using TypeScript

One of the challenges I'm facing is when I call the BookTracker component in my root App.tsx file, specifically with the prop book={MY_MOCK}. type BookParamsTypes = { title: string; pubDate: number; //... rest }; import { BookParamsTypes } fro ...

Utilize a jest mock object and pass it as a method parameter to achieve seamless testing

I am attempting to create a mock object (ColumnApi from ag-grid) using jest and then pass it as a parameter to a function that calls the "getAllColumns" method from ColumnApi. I am not concerned with how the "getAllColumns" method functions, but I want it ...

We are unable to create a 'Worker' as Module scripts are not yet supported on DedicatedWorkers in Angular 8

Error An error has occurred in the following files: node_modules/typescript/lib/lib.dom.d.ts and node_modules/typescript/lib/lib.webworker.d.ts. Definitions of various identifiers conflict with those in other files, leading to modifier conflicts and dup ...

The React component continuously refreshes whenever the screen is resized or a different tab is opened

I've encountered a bizarre issue on my portfolio site where a diagonal circle is generated every few seconds. The problem arises when I minimize the window or switch tabs, and upon returning, multiple circles populate the screen simultaneously. This b ...

The Angular2 TypeScript error TS2322 indicates that the type '() => any' cannot be assigned to type 'Post[]'

Check out my GitHub repository Encountering an error in the CLI console despite defining Post as an interface/type in user.component.ts: import { Component } from '@angular/core'; import {PostService} from '../services/post.service'; ...

Angular Universal failing to display content within the router-outlet

Currently, I'm working on implementing server-side rendering (SSR) for my Angular 7 application using Angular Universal. I followed the guide provided at https://angular.io/guide/universal and managed to successfully render the content of the app.comp ...

Implementing a wrapped object check using a union type

Exploring the use of union types with basic primitives and custom objects, I created a contrived example inspired by the sample union type shown in the Typescript documentation under the Union Types section. In this example, I introduced a fictional type c ...

Angular 7: module not found error - unable to locate 'underscore' package

Currently tackling a project using Angular 7. Attempted to add npm install --save @types/underscore but encountered the following errors: npm WARN @agm/[email protected] requires a peer of @angular/common@^5.0.0 || ^6.0.0 but none is installe ...

The date format being sent by Angular to Java is incorrect, resulting in the inability to create an object in the

In my coupon system, I am experiencing an issue with the date format. The Java coupon bean has a date.sql startDate and endDate, while the Angular coupon model includes startDate:Date and endDate:Date in its constructor. However, when I display the dates o ...