Transferring information using TypeScript

My issue arises when transferring data from HTML in the following format

Karbohidrat :{{karbohidrat}} <button ion-button (click)="cekHalamanMakanan('karbohidrat')">View carbohydrate foods</button> <br>

Then, I retrieve the karbohidrat using the cekHalamanMakanan function like this

cekHalamanMakanan(value)
  {
   }

Upon trying to console.log, the correct response is displayed.
Subsequently, I aim to add the value to an array and send the array to the next page using navctrl

gizi: any;    
this.gizi= {};
this.gizi = this.navParams.data;
this.karbohidrat=this.gizi.karbohidrat;
this.protein_hewani=this.gizi.protein_hewani;
this.protein_nabati=this.gizi.protein_nabati;
this.lemak=this.gizi.lemak;
this.jenis=this.gizi.value;

When receiving it using navparams

this.makanan = {}
this.makanan = this.navParams.data;
this.variabel = this.makanan.jenis; 

However, upon attempting to view it through console.log, "undefined" is displayed..

Below is the complete code snippet:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase} from 'angularfire2/database';
import { HalamanmakananPage} from '../halamanmakanan/halamanmakanan'

/**
 * Generated class for the RekomendasiPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-rekomendasi',
  templateUrl: 'rekomendasi.html',
})
export class RekomendasiPage {
  gizi: any;
  karbohidrat: number;
  protein_hewani: number;
  protein_nabati: number;
  lemak: number;
  jenis: string;
  value: string;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad RekomendasiPage');
  }

  cekHalamanMakanan(value)
  {
    console.log(value);

    this.gizi= {};
    this.gizi = this.navParams.data;
    this.karbohidrat=this.gizi.karbohidrat;
    this.protein_hewani=this.gizi.protein_hewani;
    this.protein_nabati=this.gizi.protein_nabati;
    this.lemak=this.gizi.lemak;
    this.jenis=this.gizi.value;
    console.log(this.karbohidrat,this.protein_hewani,this.protein_nabati,this.lemak,this.jenis);

    this.navCtrl.push(HalamanmakananPage,this.gizi);
  }

}

Answer №1

Within this function, it seems that the parameter 'karbohidrat' is only being logged to the console and not utilized elsewhere. The remaining code operates based on the data passed in through NavParams during page load.

checkFoodPage(value)
  {
    console.log(value);

    this.nutrition= {};
    this.nutrition = this.navParams.data;
    this.carbohydrate=this.nutrition.carbohydrate;
    this.animal_protein=this.nutrition.animal_protein;
    this.vegetable_protein=this.nutrition.vegetable_protein;
    this.fat=this.nutrition.fat;
    this.type=this.nutrition.value;
    console.log(this.carbohydrate,this.animal_protein,this.vegetable_protein,this.fat,this.type);

    this.navCtrl.push(FoodPage,this.nutrition);
  }

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

Having trouble accessing the theme in a styled component with @emotion/styled

https://i.stack.imgur.com/zHLON.png I've been using @emotion/react for theming and successfully injected the theme into it. I can access the theme using useTheme within components, but I'm facing some difficulties in accessing the theme within s ...

The Angular @Input directive may be prone to receiving inaccurate model data

I am currently working on setting up @Input for my component using a model that resembles the following: interface Car { sail?: never tires: number weight: number } interface Boat { tires?: never sail: boolean weight: number } exp ...

Angular: Retrieve the source after navigating

Hello there, I am facing a simple problem. I have 2 components navigating to 1 component and in that one component, I need to distinguish which component the navigation came from so I can take appropriate action (such as refreshing a list). The issue is t ...

Using Angular's typeahead with RxJs switchMap for subscribing to data sources

Implementing the Angular bootstrap Typeahead plugin for displaying colors. However, I am facing difficulty in resolving circular references like I have done in other parts of my project. The RxJs SwitchMap operator is not working for me in this case. Are t ...

What is the importance of having typings when using TypeScript?

I recently came across a post on setting up Material-UI for React with Typescript on Stack Overflow: How to setup Material-UI for React with Typescript? As someone who is brand new to typescript, I initially assumed that typescript was simply a superset o ...

What is the reason that TypeScript cannot replace a method of the base class with a subtype?

Here's a straightforward example. type Callback<T> = (sender: T) => void; class Warehouse<T> { private callbacks: Callback<T>[]; public constructor(callbacks: Callback<T>[]) { this.callbacks = callbacks; ...

The module declaration can be found in two locations

After developing an app in debug mode and confirming that it functions properly on a device, I encountered an error while trying to create a release build: https://i.stack.imgur.com/ztQpD.png The process involved generating a page using 'ionic gener ...

A guide on accessing a dynamic object key in array.map()

How can I dynamically return an object key in array.map()? Currently, I am retrieving the maximum value from an array using a specific object key with the following code: Math.max.apply(Math, class.map(function (o) { return o.Students; })); In this code ...

Dynamic autocomplete in Oclif utilizing an HTTP request

Is it feasible for Oclif to support the functionality of making API calls to retrieve values for autocomplete? Consider this scenario: A database stores multiple users information Upon typing show users <Tab> <Tab>, the CLI triggers an API ca ...

Unidentified object type detected - Material UI

This snippet of code was taken directly from the React Material UI website <Select id="selectedSubusecases" multiple value={stepsState.campaignOverviewStep.selectedSubUsecases} ...

Combine a pair of select statements to utilize the RxJS store within an Angular Guard

When working on an Angular Guard, I encountered a challenge where I needed to select two fields from the ngrx store. Here is the code snippet for reference: @Injectable() export class RoleGuard implements CanActivate { constructor( public router: A ...

Creation of Card Component with React Material-UI

I am facing difficulties in setting up the design for the card below. The media content is not loading and I cannot see any image on the card. Unfortunately, I am unable to share the original image due to company policies, so I have used a dummy image for ...

The observable did not trigger the next() callback

I'm currently working on incorporating a global loading indicator that can be utilized throughout the entire application. I have created an injectable service with show and hide functions: import { Injectable } from '@angular/core'; import ...

Purge the inversify-js container and fetch fresh service instances

My frontend application in react-native utilizes inversify-js for service classes. I have implemented an IOC structure where services are shared as singleton instances, each with an init/destroy method to manage internal state. While the init/destroy mec ...

Encountering a Start-up Issue with Angular2 on Windows 7

Just starting out with Angular and eager to dive deeper into Angular2. I meticulously followed the initiation guide to create the angular2-quickstart project. However, when executing the npm start command, the browser starts up but abruptly fails after jus ...

Managing API responses using Redux and Typescript

As a beginner in Typescript, I am struggling to integrate Redux with it. The documentation on using Redux with Typescript is confusing me. I am attempting to fetch data and dispatch it to my reducer for future use, just as I did before adopting Typescript ...

ViewContainerRef fails to render component on the DOM

@Component({ selector: 'my-cmp', template: ` <div #target></div> ` }) export class MyCmp { @ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef; render() { let component = createComponent(met ...

Child component responsible for closing the modalI will guide you through

A component in my project has a header with a modal window that pops up when clicked: <a (click)="open(content)" class="in">Sign in</a> <ng-template #content let-modal> <button type="button" class="close" aria-label="Close" (click)= ...

Is tsconfig.json Utilized by Gatsby When Using Typescript?

Many blog posts and the example on Gatsby JS's website demonstrate the use of a tsconfig.json file alongside the gatsby-plugin-typescript for TypeScript support in Gatsby. However, it seems like the tsconfig.json file is not actually utilized for conf ...

Attach a click event to the button with a defined class using Angular

In order to meet the requirement, I need to track user click events on all buttons with a specific class. To do this, I have to bind the click event to all buttons and ensure that the same function is triggered in all components. Any ideas on how I can ac ...