Issue with Angular 6 custom pipe causing NaN when utilizing service-sourced data

Question

Issue with Angular 6 custom pipe causing NaN when utilizing service-sourced data

I am working on a custom pipe that converts a given number into days and hours. The HTML code for this pipe is as follows:

<div *ngFor="let unit of units">
   <p>Remaining Life</p>
   <h2>{{ unit.daysRemaining | timeRemaining }}</h2>
</div>

Initially, the unit object was located within the component, and the pipe successfully converted the number. You can view it in action on this StackBlitz link.

However, I decided to load the data using a service, and that's when the values started showing as undefined (I have set it up to display as 0 in the pipe). Take a look at the outcome in this modified StackBlitz.

What could be causing this discrepancy between the two scenarios? Why does the value turn into undefined when retrieving data from a service?

javascript angular typescript

Answer 1

Answer №1

Issue:

You have created an object array in your service, where each object contains a property called hoursRemaining. However, in your app.component.html, you are trying to access a property called daysRemaining which is not defined in the objects.

Resolution:

To resolve this issue, make sure to access the correct property hoursRemaining instead of daysRemaining in the app.component.html.

<hello name="{{ name }}"></hello>
<div>
    <div>Custom Pipe:</div>
    <ul>
        <li *ngFor="let unit of units">{{ unit.hoursRemaining | daysRemaining }}</li>
    </ul>
</div>

For a working example, check out this link.

Answer 2

Issue:

You have created an object array in your service, where each object contains a property called hoursRemaining. However, in your app.component.html, you are trying to access a property called daysRemaining which is not defined in the objects.

Resolution:

To resolve this issue, make sure to access the correct property hoursRemaining instead of daysRemaining in the app.component.html.

<hello name="{{ name }}"></hello>
<div>
    <div>Custom Pipe:</div>
    <ul>
        <li *ngFor="let unit of units">{{ unit.hoursRemaining | daysRemaining }}</li>
    </ul>
</div>

For a working example, check out this link.

Answer 3

Answer №2

Your current setup shows:

<li *ngFor="let unit of units">{{ unit.daysRemaining | daysRemaining }}</li>

however, it should display:

<li *ngFor="let unit of units">{{ unit.hoursRemaining | daysRemaining }}</li>

This correction is needed in the second stackblitz within app.component.html

Answer 4

Your current setup shows:

<li *ngFor="let unit of units">{{ unit.daysRemaining | daysRemaining }}</li>

however, it should display:

<li *ngFor="let unit of units">{{ unit.hoursRemaining | daysRemaining }}</li>

This correction is needed in the second stackblitz within app.component.html

Answer 5

Answer №3

Resolution:

To resolve the issue, simply replace daysRemaining with hoursRemaining in the template.

Suggestion

If you use

<li *ngFor="let unit of units">{{ unit | json }}</li>

, it can be an effective method for debugging as it allows you to see the data passed to your pipe.

Answer 6

Resolution:

To resolve the issue, simply replace daysRemaining with hoursRemaining in the template.

Suggestion

If you use

<li *ngFor="let unit of units">{{ unit | json }}</li>

, it can be an effective method for debugging as it allows you to see the data passed to your pipe.

Answer 7

Answer №4

To ensure smooth functioning of your code, the following adjustments should be made:

<li *ngFor="let timeUnit of units">{{ timeUnit.hoursRemaining | daysRemaining }}</li>

Answer 8

To ensure smooth functioning of your code, the following adjustments should be made:

<li *ngFor="let timeUnit of units">{{ timeUnit.hoursRemaining | daysRemaining }}</li>

Issue with Angular 6 custom pipe causing NaN when utilizing service-sourced data

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Arabic text spread across multiple lines within the queryString

What is the most effective way to send a list of objects to a Controller

Substitute all items identified by a particular tag with a component

Encountering a CORS problem when attempting to upload pictures to Cloudinary from a React application

Tips for isolating the month values from the res.body.results array of objects with the help of JS Array map()

What is the correct way to effectively utilize ng-bind (one-way binding) with form inputs?

Jest throws an error: require function is not defined

Querying Firebase to find documents that do not have a specific requested field present in all

Submit HTML and JavaScript information to a PHP document

What is the most effective method in Vue.js for transitioning elements without the need to use v-for and v-if at the

How can I use jQuery to switch classes or activate a click event on the most recently clicked element?

I am still receiving an empty dropdown value despite implementing ng-selected

The issue of "URLSearchParams not being defined" arises during test execution using jest

What is the best way to extract the value from a React date picker every time the dates are modified?

The Javascript code is functioning properly in Chrome, however, it is experiencing compatibility issues in other

Is there a way to access data from a previous useState hook in a subsequent useState hook?

Leveraging Google maps to find nearby stores

How to set a new default environment in Angular CLI for running ng serve

Trouble with Date.parse() function in JavaScript on Mozilla Firefox browser

What is the best way to use command line arguments within a Node.js script?