Issue with alert not appearing when either a click or tap event is triggered in Ionic 2

Issue with Alert Not Showing on Click or Tap Event in Ionic 2: I am facing a problem where the function is not triggered when clicking a list item in Ionic. Since I am using native components, I can only test on the device which does not show any runtime errors.

I am uncertain of what is causing this issue, so any assistance would be highly appreciated. Below is the code snippet:

import { Component } from '@angular/core';
import { Hotspot, HotspotNetwork } from '@ionic-native/hotspot';
import { IonicPage, NavController, NavParams, AlertController } from 
'ionic-angular';

@IonicPage()
@Component({
   selector: 'page-wifilist',
   templateUrl: 'wifilist.html',
})
export class WifilistPage {

  networks: any;
  wifiCredentials: {
  ssid: string,
  password: string
  }
  constructor(public hotspot: Hotspot, public navCtrl: NavController, 
public alertCtrl: AlertController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.hotspot.scanWifi().then((networks: Array<HotspotNetwork>) => {
      this.networks = networks;
    });
    console.log('ionViewDidLoad WifilistPage');
  }

  setWifiCredentials(ssid: string) { 
    console.log('working');
    this.wifiCredentials.ssid = ssid;
    let passwordAlert = this.alertCtrl.create({
      title: 'Wifi Credentials',
      subTitle: 'Enter password for ' + this.wifiCredentials.ssid,
      inputs: [
        {
          name: 'password',
          placeholder: 'password',
          type: 'password'
        }
      ],
      buttons: [
        {
          text: 'cancel',
          role: 'cancel'
        },
        {
          text: 'connect',
          handler: data => {
            this.wifiCredentials.password = data.password;
          }
        }
      ]
    });
    passwordAlert.present();


    this.alertCtrl.create({
      title: this.wifiCredentials.ssid + ' ' + this.wifiCredentials.password,
      buttons: ['ok']
    }).present();
  }

}

And here is the HTML code:

<ion-header>
    <ion-navbar>
       <ion-title>
          Wifi Scanner
      </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<ion-list>
 <ion-item *ngFor="let x of networks" (tap)='setWifiCredentials(x.SSID)'>
     <ion-avatar item-start>
     <img src="./assets/imgs/wifi-logo.png">
     </ion-avatar >
      <h1 (tap)='setWifiCredentials(x.SSID)'>{{x.SSID}}</h1>
   </ion-item>
</ion-list>
</ion-content>

Answer №1

Make sure you use double dots " " when referencing the name of a variable or method instead of single dots ' '.

 <ion-item *ngFor="let x of networks" (click)="setWifiCredentials(x.SSID)">

Answer №2

After some investigation, I discovered that the issue lay with my .ts file. The wifiCredentials object had not been properly initialized before the method was called.

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

Looping through a detailed JSON array filled with objects to extract just a pair of items is essential. I aim to achieve this efficiently by utilizing LOD

Looking at this intricate JSON object... Here's a snippet of the code: entity: [{entityName: "Nrm", page: 0, pageSize: 241, status: "successfully perfrom: select Operation",…}] 0: {entityName: "Nrm", page: 0, p ...

When incorporating FontAwesome 6 into Angular 18, an error might arise stating, "Unable to associate 'spin' as it is not a recognized attribute of 'fa-icon'."

LAST UPDATE: https://github.com/FortAwesome/angular-fontawesome/blob/main/docs/upgrading/0.14.0-0.15.0.md Confirmed not a bug, it's deprecated. UPDATE - I believe it may be a bug. The version of Font Awesome on one machine is 0.14, while the non-wor ...

Unable to update a single object within an array using the spread operator

I am currently working on updating an object within an array and have encountered some issues. In my initial code, I successfully updated a specific property of the object inside the array like this: var equipment = this.equipments.find((e) => e.id === ...

What is the best way to test an external Data Transfer Object (DTO

I am looking to test an external Data Transfer Object (DTO) that undergoes frequent changes. For example: Here is a sample JavaScript (JSON) file below: // JavaScript const type User = { id: Number, name: String } // JSON user: { id: Number, ...

How can we implement `injectReducer` in Redux with TypeScript?

I have been working on a TypeScript React application with Redux to manage state. To dynamically add reducers, Redux suggested implementing an injectReducer function. In a JavaScript project, I successfully implemented this function. However, I am strugg ...

Error encountered in promise due to ng-bootstrap modal

I am currently utilizing @ng-bootstrap in my Angular 4 application. Successfully managed to open a modal instance and pass data to the modal. Upon closing the modal, I was able to retrieve the results from it. However, I encountered an issue when attempt ...

Establishing a default value for an ion-datetime in Ionic 4

I am working on creating an edit form and need to specify a default date in the ion-datetime field. In our .html file: <ion-datetime #fecha displayFormat="DD/MM/YYYY" [(ngModel)]="myVar" pickerFormat="DD MM YYYY" doneText="Ok" cancelText="Cancelar"> ...

Implementing Bootstrap 4 in an Angular 9 project without the use of JQuery

Currently, I am actively working on detaching all JQuery dependencies within my Angular project. Most of the dependencies stem from utilizing Bootstrap 4 components. Eliminating dropdowns and removing all instances of data-*** seemed to help in this proc ...

Is it possible to convert the angular material form input style back to a standard input format?

Is there a way to convert the current input lines to regular input boxes? I am working with Angular Material version 6.4.1. ...

Looking for guidance on where to find a functional code sample or comprehensive tutorial on working with ViewMetadata in Angular2

I am currently trying to understand the relationship between viewmetadata and the fundamental use of encapsulation: ViewEncapsulation, including ViewEncapsulation.Emulated and ViewEncapsulation.None. Here is a link for further information: https://angula ...

One cannot adjust the opacity of the arrow in ionic 4 ion-item details

Currently, I am dealing with a project that was not originally coded by me and have come across an issue that is proving to be challenging to resolve. Please review the code snippet below: <ion-item detail *ngIf="c.cv" [routerLink]="[&ap ...

Implementing basic authentication and Cross-Origin Resource Sharing (CORS) in

I am currently attempting to make a simple HTTP API call using Angular to a standard API with Basic HTTP Authentication. However, I am encountering an issue where the browser is blocking the request with a "Cross-Origin Request Blocked" error message, citi ...

Steps for assigning a parameter to a general purpose function

Having a generic function named retrieve: function retrieve<T>(endpoint: string, id: string, /* etc */): T {} The goal is to define a function like retrieveUser, which binds the first parameter and specifies T. An attempt was made using Function.pr ...

Innovative Functions of HTML5 LocalStorage for JavaScript and TypeScript Operations

Step-by-Step Guide: Determine if your browser supports the use of localStorage Check if localStorage has any stored items Find out how much space is available in your localStorage Get the maximum storage capacity of localStorage View the amount of space ...

Pulling information from a JSON file using Angular 2

Is there a way to extract data from a JSON file in an Angular 2 project? I attempted the following code snippet, but it seems to be ineffective. Perhaps I missed some important details... any guidance would be greatly appreciated. Additionally, I aim to s ...

Unleashing the power of control-value-accessor in StoryBook

I've developed a customized input component and am looking to create a story for it using Storybook. The input component's TypeScript file: @Component({ selector: 'app-input', templateUrl: './input.component.html', styl ...

Persistent notification that just won't disappear

I've been working on improving my Notification Component in React. import React, { useEffect, useState } from "react"; import { IoMdClose } from "react-icons/io"; export type NotificationValueType = { message: string; type: & ...

The specified property 'length' is not found on type OkPacket within the mysql2 module

In my code example below, I am simply showcasing a specific scenario: this.getCode = (code: string): Promise<codeObject | false> => { return new Promise((resolve, reject) => { pool.query('SELECT * FROM ?? WHERE code = ...

Tips for Observing angular forkJoin for multiple responses during unit testing with Jasmine

Currently, I am focusing on unit testing and I have a function that makes multiple API calls simultaneously. Although I have used spyOn on the service function, I am facing difficulty in returning multiple responses. Can anyone provide guidance on where I ...

Adjusting the alignment of button text in an Angular Kendo grid

I am currently utilizing the grid view feature of Kendo UI for Angular. While I have buttons on the grid, the issue is that the text within the buttons is not centered properly despite applying styles such as text-align:center. Here is the template for my ...