Sending a multi-layered object to a Modal with NavParams in Ionic

My Ionic page involves passing an array of objects to my Modal page:

export class SelectAddress{
    constructor(
        public id : string,
        public number : string,
        public line1 : string,
        public postcode: string
    ){}
}

I tried to achieve this by using the following code on my Ionic page:

  let modal = this.modalControl.create(SelectAddressPage, {addresses: this.addressResult as Array<SelectAddress>});
  modal.present();

Upon trying to retrieve the data on the Modal, I encountered an issue with the following code:

constructor(
          public platform: Platform,
          public params: NavParams,
          public viewCtrl: ViewController) {
this.addresses = params.get('addresses') as Array<SelectAddress>;

When attempting to loop through the results, an error message appeared:

Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

It seems that while primitive data types like integers and strings can be sent successfully, more complex types encounter issues in this process.

Initially, I tried injecting AddressService in my ModalControl to retrieve the data, but the dependency injector failed to do so.

Do you have any suggestions on sending complex types via navParams or should I explore alternative options?

Answer №1

It seems like the issue lies in attempting to use a typescript class for type assertion. In order to ensure that a variable is of a specific type using either the older type assertion method (let x = <Type> getX();) or the newer as operator (let x = getX() as Type), you must define an interface or a type:

export interface SelectAddress {
  id: string;
  number: string;
  line1: string;
  postcode: string;
}

export type SelectAddress = {
  id: string;
  number: string;
  line1: string;
  postcode: string;
}

In Typescript, types are primarily a compile-time concept and do not exist during runtime. Therefore, when your application runs, it actually operates with Javascript primitive types.

Answer №2

The issue I encountered was simply due to a mismatch in the type I was trying to cast, caused by referencing the wrong variable.

Here is what I intended to do:

let modal = this.modalControl.create(SelectAddressPage, {addresses: this.addressResult.addresses as Array<SelectAddress>});

this.addressResult.addresses, not this.addressResult

I made a careless mistake.

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

Typescript Support in Goland IDE for HTML Documents

I'm currently utilizing Go for my programming tasks, and I prefer the Goland IDE developed by Jetbrains. Is there a way for me to incorporate typescript into my .html template files that contain a mix of HTML, CSS, and JS? Your assistance is much ap ...

Is there a way to customize the language used for the months and days on the DatePicker

Is there a way to change the language of the DatePicker (months and days) in Material UI? I have attempted to implement localization through both the theme and LocalizationProvider, but neither method seems to work. Here are some resources I have looked a ...

Angular - Dividing Functionality into Multiple Modules

I am currently working with two separate modules that have completely different designs. To integrate these modules, I decided to create a new module called "accounts". However, when I include the line import { AppComponent as Account_AppComponent} from &a ...

Building secure and responsive routes using next.js middleware

After setting up my routes.ts file to store protected routes, I encountered an issue with dynamic URLs not being properly secured. Even though regular routes like '/profile' were restricted for unauthenticated users, the dynamic routes remained a ...

Closing Popover Instance from another Component (Ionic, Typescript)

I've been dealing with an issue where a function that I imported from another class isn't getting called and the parser isn't recognizing it. The Popover in my code also can't be closed. I've tried various similar solutions, but no ...

What's up with the strange event handling in Angular2?

How can a draggable vertical bar be created with Angular2? Setting isDragging to true when the user clicks it and calling moveHandler when the mouse moves seems straightforward, but there are a couple of issues: When the if-condition in ngOnInit is true, ...

Exploring the depths of a nested object by traversing through an array of its

Trying to iterate through a nested object structure with Angular TS: { "stringKey1": { "child": [ { "stringKey2": { "child": [] ...

The HTML file that was typically generated by Webpack is now missing from the output

While working on my nodejs app using typescript, react, and webpack, everything was running smoothly. I was getting the expected output - an HTML file along with the bundle file. However, out of nowhere and without making any changes to my code, I noticed ...

Leveraging the power of TypeScript and Firebase with async/await for executing multiple

Currently, I am reading through user records in a file line by line. Each line represents a user record that I create if it doesn't already exist. It's possible for the same user record to be spread across multiple lines, so when I detect that it ...

Develop a series of sequential tests for the playwright to execute

Can someone assist me with my code? I am attempting to write a test in Playwright that navigates to the forgot password page, creates a new password, and then tries to log in using that new password. However, I am encountering an issue with retrieving the ...

Is it possible to modify the CSS produced by Bootstrap in an Angular application?

Just starting out with Angular and Bootstrap I have the following displayed in my browser: Browser Code shown through inspect and this is what I have in my code: <ng-template #newSlaVmData let-modal> <div class="modal-header moda ...

Displaying personalized message 'Loading...' while waiting for the data to be retrieved from the API

How can I display a 'Loading' text message until the data is fetched from the API? Currently, it just shows a message saying 'No data to display' I have searched through the documentation but couldn't find any related information. ...

What steps should I take to enable users of my library to customize component templates as needed?

I created a customized component to enhance the appearance of bootstrap form controls, intended for use in various projects. I am considering transforming this into a library (a separate npm package with its own @NgModule), but some projects may wish to mo ...

Implementing functions in Typescript that have duplicate functionality

Within the same Typescript class, I have declared two different function signatures as shown below: public emit<T1>(event: string, arg1: T1): void {} and public emit<T1,T2>(event: string, arg1: T1, arg2: T2): void {} Despite having a differ ...

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

Steps for enlarging the size of a content popover

I'm trying to figure out how to adjust the height of a content popover so that the footer appears below it. When I increase the height of the content, the footer stays in the same position. Shouldn't it move after the ion-content or at the bottom ...

What sets apart the two methods of defining an event in a React component?

Can you explain the nuances between these two approaches to declaring events in a React component? Is it merely a matter of personal preference, or are there more subtle distinctions between them? interface PropsX { onClick: () => void; } const But ...

The property "props" is not recognized within the context of type PropType

Within my component, I am receiving a prop ("author") from a parent component. Although I have defined the prop type as "AuthorProps", I am getting an error stating Property 'author' does not exist on type 'AuthorProps', even though the ...

Transform a JSON array containing individual objects into a new JSON array with objects

My array contains objects with nested objects in each element, structured like this: [ { "person": { "name": "John", "isActive": true, "id": 1 } }, { "person": { "name": "Ted", "isActive": true, "id": 2 } } ] I ...

What should I do when dealing with multiple submit buttons in NextJS?

How can I differentiate between two submit buttons in a form component created in Next.js? I'm struggling to determine which button was pressed and need help resolving this issue. import React from "react"; const LoginPage = () => { as ...