Prevent further selections by deactivating checkbox upon button click in Ionic framework

I am in the process of developing a new feature for my Ionic app that involves creating profile groups. Users are required to select profiles from a checkbox list, then click a button to create the group. Once created, the selected profiles should either disappear or become unclickable. However, I am encountering difficulties implementing this functionality. Code: HTML

<ion-list>
  <ion-item *ngFor="let profile of profiles; let i = index">
     <ion-label>{{profile.name}}</ion-label>
     <ion-checkbox color="dark" [(ngModel)]="values[i]"></ion-checkbox>
  </ion-item>
</ion-list>
<button ion-button full (click)="addGroup()">Add group</button>

TS

profiles = [];
values = [];
groupList = [];

addGroup(){
let y=0;
for(let i=0; i<this.values.length; i++){
  if(this.values[i] == true){
    this.groupList[y] = this.profiles[i];
    y++;
  }
}
let alert = this.alertCtrl.create({
  title: 'Group created!',
  buttons: ['OK']
});
alert.present();

//I attempted to resolve the issue with the following code snippet...
for(let i=0; i<this.values.length; i++){
  if(this.values[i] == true){
    this.profiles[i] = 0;
  }
}
}

Answer №1

Attempting to iterate through values in an array, however, the array is empty. It appears that there may be some fundamental programming concepts that are overlooked here.

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

Change the value of a checkbox using a boolean attribute

Is it possible to assign a checkbox value based on an attribute set with PHP? At first glance, this task may seem strange, but the solution is actually quite simple. Here is an example of how you can achieve this using PHP: <input type="checkbox" val= ...

Here's a guide on accessing information from a local JSON file and displaying it on an HTML page using Ionic 2 with TypeScript

I have received a JSON file formatted like the following: { "records": { "patients": { "day": "Today", "details": [ { "name":"Diab", "stat":"Pending", "phno":"8197246465", "patNames":"Sandr ...

Changing a photo into base64 format using Angular 2

How can I convert an image to base64 in Angular 2? The image is uploaded from the local filesystem. Currently, I am using fileLoadedEvent.target.result to achieve this. However, when I try to send this base64 string through REST services to Java, it fails ...

A guide to declaring functions based on certain conditions

I am looking to assign a function that is the result of a ternary operator, which in turn calls one of two functions. The code snippet I have written so far is as follows: const action1 = (x: number) => { // do something ...

What is the reason for receiving a JSX warning even though JSX is not being utilized in the code?

In my Vue.js component file using the Quasar framework, I have the following code block inside the <template>: <q-btn color="green" label="save & continue editing" @click="saveCase()" /> This snippet is par ...

Angular is not programmed to automatically reflect updates made to my string array

let signalRServerEndPoint = 'https://localhost:44338'; this.connection = $.hubConnection(signalRServerEndPoint); this.proxy = this.connection.createHubProxy('MessagesHub'); this.proxy.on("ReceiveMessage", (message) => { ...

Strategies for updating JSON file content as data evolves

I am facing an issue with loading a json file that populates charts. The file is generated from external data sources and stored in the asset directory. Is there a method to automatically load the updated json file? I have attempted to include the code fo ...

Beginning selenium web-driver with TypeScript - a simple guide

Currently, I am embarking on a UI Automation project utilizing Selenium and typeScript. I would greatly appreciate any insights on how to proceed with this endeavor. My previous experience involves working with Selenium WebDriver in Java. I have successf ...

Transferring files from one azure blob container to another

I am currently utilizing the @azure/storage-blob package to manage files within Azure. Within the same Azure storage account, I have two storage containers - one for source files and the other for destination files. My objective is to copy a file from th ...

How to pass a distinct identifier to an Angular 2 component?

Encountering an issue with Angular2 where I need to assign a unique identifier to my reusable component. Seeking assistance from the community. account.html <div class="container"> <!-- ACCOUNT INFO --> <div class="row"> ...

Develop a function that returns a specific type that has been mapped

I'm currently working on a method that loops through an object and replaces key-value pairs where the value matches { _id: Types.ObjectId } with a new key and maps the value to the string representation of _id. For example: { "name": " ...

Improving the structure of a TypeScript switch statement

Looking for a more efficient way to implement a switch statement in TypeScript? Here is the current code snippet from a component: switch (actionType) { case Type.Cancel { this.cancel(); break; } case Type.Discard { thi ...

Downloading plugins from the Cordova plugin repository is extremely sluggish on a specific device

When attempting to pull down a Cordova plugin through npm on my Mac, the process is agonizingly slow, taking over a minute: cordova plugin add cordova-plugin-splashscreen However, using the git URL speeds up the process significantly, only taking around ...

Guide to setting headers to application/json in Angular 2

I've been attempting to send an HTTP post request in Angular 2, but I'm facing difficulties setting the headers to content type application JSON. This is my current code: login(url, postdata) { var headers = new Headers({'Content-Type&a ...

How come TypeScript does not generate an error when attempting to import a default export that does not exist?

As I work on converting my code from non-TypeScript CommonJS files to TypeScript ES6 modules, I encountered an issue with the import statements. Specifically, I needed to use import * as x instead of import x: The original snippet looked like this: const ...

Packaging an NPM module to enable unique import paths for Vite and Typescript integration

Is there a way to package my NPM module so that I can use different import paths for various components within the package? I have looked into webpack solutions, but I am working with Vite and TypeScript. This is the structure of my package: - src - ato ...

Continuing the operation following the closure of a modal

Exploring the unknown territory of transitioning from Ionic 1 to Ionic 4 brings about its fair share of challenges. In my previous Ionic 1 projects, I heavily relied on functions incorporating Ionic popups for seamless operations. Referring to a sample co ...

The mysterious appearance of the <v-*> custom element in Vuetify Jest

Currently, I am in the process of writing unit tests for my project using Jest. The project itself is built on Vue, Vuetify (1.5), TypeScript, and vue-property-decorator. One particular area of focus for me has been creating a basic wrapper for the <v- ...

Mocking store.dispatch in Jest with TypeScript did not result in any function calls being made

Testing Troubles I'm a beginner in the world of testing and I'm facing some challenges. Despite going through all the documentation on jest, I couldn't find information specific to TypeScript cases. Currently, I'm on a quest to figure ...

What is the best approach to breaking down attributes upon import according to the theme?

Hey there! Here's the thing - I have this file called <code>colors.ts:</p> export const black = '#0C0C0C'; export const blue = '#22618E'; Whenever I need to use a color, I import it like so: import {black} from 'S ...