Compiling angular and ngrx: errors when tap() is removed

I have a snippet of code (slightly simplified) that is functioning correctly and the console logs are displaying everything properly, with valid parameters passed:

  return observable.pipe(map(response => ({ response, param2, param3, param4, param5 })));
}),
tap(({ response }) => {
  if (this.hasNotifications(response?.notif)) {
    //do something
  }
}),
filter(({ response }) => !this.hasNotifications(response?.notif)),
switchMap(({ response, param2, param3, param4, param5 }) => {
  console.log('and even here');
  console.log(response);
  console.log(param2);
  console.log(param3);
  console.log(param4);
  console.log(param5);

However, if I remove

tap(() => console.log('we are here')),

which was only inserted for development purposes, I encounter compilation errors:

   error TS2339: Property 'param2' does not exist on type '{ response: any; }'.

305     switchMap(({ response, param2, param3, param4, param5 }) => {

The same issue arises for param3, param4, and param5.

Do you have any insight into why these errors have appeared and how they can be rectified while still correctly passing the parameters?

Answer №1

It appears that this particular piece of code is intended for handling reducers or effects triggered by actions which pass multiple parameters as a properties object. To address this, you can streamline the process by simplifying the parameter object to just 'response', and then access all the necessary parameters within the 'response' object itself:

switchMap((response) => {
  console.log('and even here');
  console.log(response);
  console.log(response.param2);
  console.log(response.param3);
  console.log(response.param4);
  console.log(response.param5);
}

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

Using class variance authority variants allows for the acceptance of a "null" value, although it is not recommended

My approach with cva is as follows: const checkboxOptions = cva('border ...', { variants: { size: { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', }, }, defaultVariants: ...

Tips for generating rows with material-ui grid

I am utilizing material-ui grid to make my content responsive. However, I am facing challenges in creating nested rows for my layout. My requirement is to have the first row span the entire width and then divide it into 3 columns with widths of 3, 3, and 6 ...

Guide on Validating and Updating an embedded item within a mongoDB Collection Document

How do I go about updating the values of an embedded object within a mongoDB document? The values displayed for {{service.id}} and {{service.username}} in the table template are correct. However, I am unsure of the correct way to access them within the sa ...

If the value is null, pass it as is; if it is not null, convert it to a date using the

I am currently facing an issue regarding passing a date value into the rrule plugin of a fullCalendar. Here is the snippet of code in question: Endate = null; rrule: { freq: "Daily", interval: 1, dtstart: StartDate.toDate ...

Lazy loading child routes in Angular 4 encounters issues when the child routes share the same path

I have developed an application that features a contact list with the capability to select and view detailed information about a single contact. The contact detail page includes tabs for sub-information such as profile, touch points, and contact info. Belo ...

NG6002 Error: Detected in the imports section of the AppModule in Angular, but unable to locate a corresponding NgModule class

I recently started using firestore and encountered an error that seems to be related to Ivy after conducting some research. I'm not very experienced in making changes to tsconfig.app.json, but based on other responses, this seems to be the direction I ...

Using Angular components to manipulate the CSS in the DOM

Struggling with dom manipulation in an angular/node.js environment using typescript for my visualcomponent.html The second inline styling works fine, showing the h1 in blue color. However, I run into issues when trying to embed strings within the innerHTM ...

In Vue, you can dynamically load a JavaScript file containing a JavaScript object during runtime

I'm in the process of developing a no-code application with Vue. I have come across an issue where I cannot add functions to a JSON file that I want to import at runtime. As a workaround, I decided to use a JavaScript or TypeScript file to store the J ...

Reset preview image upon submission

I have a contact form where I am using the following code to display an uploaded image preview: [file fileuploader filetypes:jpg id:uploader] <img id="preview" src="#" /> <script> var uploader = document.getElementById(&apos ...

Having difficulties fetching images from the Twitter API

I'm encountering an issue with a simple Twitter API request for a specific tweet. Although the tweet should have multiple images attached to it, the media entity object is returning empty. Here's the tweet in question: https://twitter.com/talonc ...

What is the best way to retrieve data and handle error messages using the fetch API in Node.js?

I am attempting to utilize Node's 18 fetch API to send requests to a REST server. Below is the code snippet: const get = () => { let response = await fetch("10.0.0.12/test", { method: "GET", }); console.log(&quo ...

show a notification once the maximum number of checkboxes has been selected

I came across this code snippet from a previous question and I'm interested in making some modifications to it so that a message can be displayed after the limit is reached. Would adding a slideToggle to the .checkboxmsg within the function be the mos ...

Determining when a message has been ignored using php

One of the features I am working on for my app is adding announcements, which are essentially personalized messages to users. Once a user receives a message and dismisses it, I want to ensure that specific message does not appear again. Here is the PHP co ...

Creating a personalized attribute directive within Angular2

I've been attempting to apply a custom attribute directive to an input element, but I'm struggling to achieve it. Here is my directive code: @Directive({ selector: '[disable-paste]' }) export class DisablePaste { constructor(p ...

"The Promise in the AngularJS Karma test specification did not resolve and the .then() method was not invoked

An issue arises when attempting to perform AngularJS Karma Unit Testing on a service. The service includes a method like the one below: service.getIntersectingElements = function (element, elements) { var deferred = $q.defer(); var tolerance = 20 ...

Querying Mongoose Nested Data in Express: A Comprehensive Guide

I need to retrieve the "stocked" boolean value for item "4" belonging to user "456" from my mongoose data collection. However, when I try to query for this specific information, I end up receiving the entire user object instead. Data: data = [{ use ...

How can I display the value of a variable within an Angular 4 component directly from the console?

In my Angular 4 component, I store a simple key in a variable. However, I am aware that when the app is closed, all values within the variable are erased. Here is an example of this: export class LoginComponent implements OnInit { data : any; const ...

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

Using template strings in one-way binding: a beginner's guide

Are you familiar with combining template strings with interpolation? This particular line is not functioning correctly. <a [href]='`#/emailing/scenario/${marketing._id}`'>{{marketing.name}}</a> Thank you! PS: I understand that the a ...

Android canvas is experiencing a sudden freeze

My canvas-based javascript application is functioning on android, however, I am encountering a problem where dragging across the screen with my finger causes the entire web page to freeze. Is there a solution to prevent this issue from happening? ...