Angular2 - The 'then' property is missing from the 'void' type

Question

Angular2 - The 'then' property is missing from the 'void' type

In my attempt to create a simple app, I encountered an issue when trying to delete a user by clicking on the delete button.

When attempting to run the server, I received an error related to the then method in the deleteUser() component:

 deleteUser(user: User, event: any) {
    event.stopPropagation();
    this.userService
      .deleteUser(user)
      .then(res => {
        this.httpUsers = this.httpUsers.filter(h => h !== user);
        if (this.selectedUser === user) { this.selectedUser = null; }
      })
      .catch(error => this.error = error);
  }

The service looks like this:

  deleteUser(user: User) {
    console.log('Deleting user');
  }

The error message reads:

app/users.component.ts(46,8): error TS2339: Property 'then' does not exist on type 'void'.

The error occurs on line 46 with .then(res => {

After researching online, I came across this question and attempted to remove void from the deleteUser function, but it did not resolve the issue.

Can anyone provide insight into what I might be doing wrong?

angular typescript

Answer 1

Answer №1

In order to delete an item, you need to invoke the delete function to receive a promise which can be followed by using .then( in this manner:

removeUser(user: User) {
   return this.http.delete(url+id,...).toPromise();
}

Answer 2

In order to delete an item, you need to invoke the delete function to receive a promise which can be followed by using .then( in this manner:

removeUser(user: User) {
   return this.http.delete(url+id,...).toPromise();
}

Answer 3

Answer №2

If you're working with promises, then the 'then' method is the way to go. On the other hand, if you need to make a call to a REST API and map the result, using 'subscribe' would be more appropriate.

Implementing 'then'

Service method

  getAudits() {
    // console.log('audits' + amplify.store('audits'));
    let audits: Audit[] = amplify.store('audits'));    
    return Promise.resolve(audits);
  }

Component

this.auditService.getAudits().then(audits => {
  this.audits = audits;
  this.updateChart(true);
});

Implementing 'subscribe'

Service method

  getAudits() {
    return this.http.get('/rest/batch').map(res => res.json());
  }

Component

this.auditService.getAudits().subscribe(audits => {
  this.audits = audits;
  this.updateChart(true);
});

Answer 4

If you're working with promises, then the 'then' method is the way to go. On the other hand, if you need to make a call to a REST API and map the result, using 'subscribe' would be more appropriate.

Implementing 'then'

Service method

  getAudits() {
    // console.log('audits' + amplify.store('audits'));
    let audits: Audit[] = amplify.store('audits'));    
    return Promise.resolve(audits);
  }

Component

this.auditService.getAudits().then(audits => {
  this.audits = audits;
  this.updateChart(true);
});

Implementing 'subscribe'

Service method

  getAudits() {
    return this.http.get('/rest/batch').map(res => res.json());
  }

Component

this.auditService.getAudits().subscribe(audits => {
  this.audits = audits;
  this.updateChart(true);
});

Answer 5

Answer №3

Your service's deleteUser method does not have a return value of type Promise, which is why you cannot chain .then(res => ...) after it as mentioned in the error message.

deleteUser(user: User) {
  console.log('Deleting user'); // <-- no explicit return statement - defaults to void
}

Answer 6

Your service's deleteUser method does not have a return value of type Promise, which is why you cannot chain .then(res => ...) after it as mentioned in the error message.

deleteUser(user: User) {
  console.log('Deleting user'); // <-- no explicit return statement - defaults to void
}

Angular2 - The 'then' property is missing from the 'void' type

Answer №1

Answer №2

Implementing 'then'

Implementing 'subscribe'

Answer №3

Similar questions

Show information stored in Angularjs2 file (.ts) within an HTML document

Visuals failing to display following Angular project compilation

Is there a way to automatically scroll to the bottom of a div when it first

The 'ngForOf' directive cannot be bound to 'div' element as it is not recognized as a valid property

There is an error in the test due to the undefined injected service in the service

Process running on an undetermined outcome (resulting from a function that requires promises to be fulfilled)

Need help with TypeScript syntax for concatenating strings?

The TypeScript library React-Time-Ago seems to require a number, but I'm passing it a string instead. I'm struggling to find a way to make it accept a number

Extract headers from an HTTP GET request in Angular

The data type '{}' cannot be assigned to the data type 'Profile'

Activate the button when a checkbox within a looping structure is selected using Angular 5

Angular element in a child window of a browser

Svelte with Typescript: Uncovering the Types of Props

Managing forms in Django rest framework and Angular2

What is preventing TypeScript from automatically inferring the type of an argument in a generic function that utilizes `keyof`?

Unable to disable the rule explicit-function-return-type in ESLint while performing TypeScript linting

The Angular 10 HTTP request interval is not functioning as expected

Is it possible for an Angular2 HTTP request to retrieve the response body as binary data?

Using Typescript and React to retrieve the type of a variable based on its defined type

Accessing User Session with NextAuth in Application Router API Route