Refresh grid components with checkbox feature - ionic 2

I'm in need of assistance. I have a grid with multiple columns and I want to update the selected rows in my database by clicking a button. Unfortunately, I haven't been able to find any information on how to do this.

Below is the code I am currently using.

<ion-row *ngFor="let errors of eta_allErrorsRS">
          <ion-col class="info-col col-align" col-1>
            ETA
          </ion-col>
          <ion-col class="info-col" col-1>
            <ion-checkbox ng-model="active"></ion-checkbox>
          </ion-col>
          <ion-col class="info-col col-align" col-1>
            SLI
          </ion-col>
          <ion-col class="info-col col-align" col-1>
            ODBMS
          </ion-col>
          <ion-col class="info-col col-align" col-1>
            {{errors.vc_codi_iata_pais}}
          </ion-col>
          <ion-col class="info-col col-align" col-2>
            {{errors.nb_oc}} + "/" + {{errors.fech_ins_eta}}
          </ion-col>
          <ion-col class="info-col col-align" col-4>
            {{errors.vc_error_envio_eta}}
          </ion-col>
          <ion-col class="info-col col-align" col-1>
            {{errors.fech_eta}}
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col class="info-col col-footer" col-12>
            <button ion-button class="button-footer" smerrors color="bluedark" (click)="republishConfirm()">Republish</button>
            <button ion-button class="button-footer" smerrors color="bluedark" (click)="RejectConfirm()">Reject</button>
          </ion-col>
        </ion-row>

Your help would be greatly appreciated!

typescriptcheckboxionic2

Answer №1

According to the information provided in the official documentation, it is recommended to utilize ngModel in the following manner:

<ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
    <button (click)="updateDatabaseClicked(errors)">ClickOnMe</button>
  </ion-item>

Subsequently, in your TypeScript file:

updateDatabaseClicked(errors){
   writeIntoDatabase(this.pepperoni);
}

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

Is there a way to retrieve the value of an option passed by serverless CLI in serverless.ts file?

As I explored the serverless framework with serverless.ts for configuration, a certain question came to mind. When utilizing the serverless CLI, passing values can be done in the following way: serverless offline --stage prod In the serverless.yml file, ...

typescriptyamlserverless

The data type 'unknown' cannot be assigned to the type 'any[]', 'Iterable<any>', or (Iterable<any> & any[])

I have been working on creating a custom search filter in my Angular project, and it was functioning properly. However, I encountered an error in my Visual Studio Code. In my previous project, everything was working fine until I updated my CLI, which resul ...

javascriptangulartypescriptangular11

Comparing TypeScript's `return;` with `return undefined;`: which is better?

I encountered a strange behavior that is puzzling to me, and I'm not sure if there's a logical explanation for it. In TypeScript, the following code works perfectly: type UndefinedFunction = () => undefined; let uf: UndefinedFunction = funct ...

typescript

How to deselect a checkbox using AngularJS

I have a checklist of items <input type="checkbox" ng-model="servicesModel" value={{item.name}} id={{item.name}} ng-click="toggleSelection(item.name)"/> and I need to unselect the currently selected checkbox $scope.toggleSelection = function toggl ...

javascriptangularjscheckbox

Ways to merge two arrays into one in React JS

Here are two arrays presented below: const arrayA = { 0: { id: XXXXXXX, name: "test" }, 1: { id: YYYYYYY, name: "example" } } const arrayB = { 0: { id: XXXXXXX, category: "sea", } 1: { id: YYYYY ...

javascriptreactjstypescript

How can I enable dragging functionality for components (not elements) in angular?

While utilizing the Angular CDK drag and drop module, I have observed that it functions seamlessly on html elements like div, p, etc. However, when I apply a cdkDrag directive to a component, it does not seem to work as expected. <!-- IT WORKS --> ...

angulartypescriptangular-cdkdragdropmodule

Enable automatic suggestion in Monaco Editor by utilizing .d.ts files created from jsdoc

I am in the process of creating a website that allows users to write JavaScript code using the Monaco editor. I have developed custom JavaScript libraries for them and want to enable auto-completion for these libraries. The custom libraries are written in ...

javascripttypescripttscmonaco-editor

Leverage es6 classes along with mongoose in typescript to utilize loadClass functionality

I've been struggling with a problem and despite my exhaustive search on Google, I still haven't found a solution. My issue revolves around incorporating es6 classes with mongoose using the schema.loadClass(class) method. Unfortunately, when worki ...

node.jsmongodbtypescriptmongoosees6-class

Optimizing your use of fromCharCode.apply with Uint8Array in TypeScript 3

I recently came across some code that I inherited which appears like this: String.fromCharCode.apply(null, new Uint8Array(license)); Recently, we updated our project dependencies to TypeScript 3, which raised an error stating: Argument of type 'Ui ...

typescriptecmascript-6uint8array

Testing the Compatibility of Angular JS and Angular 8 in a Hybrid Application

I am currently working on a hybrid application using AngularJS and Angular 8. The new components I create in Angular need to be downgraded for use in AngularJS. Here is a snippet of the module code: @NgModule({ // Declarations and Imports providers ...

angularjsangulartypescriptunit-testingkarma-jasmine

What is the best way to combine async/await with a custom Promise class implementation?

I've created a unique Promise class. How can I incorporate it with async/await? type Resolve<T> = (x: T | PromiseLike<T>) => void type Reject = (reason?: any) => void class CustomizedPromise<T> extends Promise<T> { ...

javascripttypescriptasync-awaitpromise

Is it Observable or Not? Typescript Typehint helping you determine

I'm facing an issue while writing a function with correct typehints. It seems to work fine with explicit type hinting but breaks down when trying to use automatic type hinting. Can someone please help me identify the error in my code and suggest how I ...

typescripttype-hinting

What steps do I need to take to create a pristine build of the Microsoft/VSCode source code?

Currently working on setting up a fresh development environment for microsoft/vscode. As a beginner in JS, TS, NPM, and Yarn, which specific command should I run in order to delete all build artifacts and output files and compile the code changes I made? ...

typescriptnpmvisual-studio-codeopen-sourceyarnpkg

Angular HTTP: GET 404 response from server

I have created this HTTP request method: public isExisting(id: string): Observable<boolean> { const createURL = () => map((userId: string) => this.createIdURL(userId)); const createResponse = () => map(() => true); const hand ...

angulartypescriptrxjs

Upgrading Angular from version 8 to 9: Dealing with Compilation Errors in Ivy Templates

After successfully upgrading my Angular application from version 8 to version 9 following the Angular Update Guide, I encountered some issues in the ts files and managed to resolve them all. In version 8, I was using the View Engine instead of Ivy, which ...

javascriptangulartypescriptangular9angular-upgrade

Update 2020: The data pathway ".builders['app-shell']" must include the mandatory property 'class'

Having exhausted all options in various forums, including StackOverflow, without success. Tried and failed: npm uninstall @angular-devkit/build-angular npm cache clean -f npm install @angular-devkit/build-angular Deleted the node_modules folder and ...

node.jsangulartypescriptnpmrxjs

Take out a specific element from an array consisting of multiple objects

I have a specific array structure and I need to remove elements that match a certain criteria. Here is the initial array: const updatedUsersInfo = [ { alias: 'ba', userId: '0058V00000DYOqsQAH', username: '<a href=" ...

arraystypescript

What strategies can I implement in Angular to enhance the efficiency of my code and reduce load time? Presently, the load time stands at 2

I'm looking to enhance the performance of my code to increase speed. How can I optimize the following code snippet to further improve load time? Additionally, any suggestions on what considerations I should keep in mind would be greatly appreciated. C ...

javascriptarraysangulartypescriptloops

Export both the enum and default function in the Typescript declaration for uuidv5

My goal is to create a Typescript Declaration for uuidv5, my first declaration for a 3rd party module. The structure of the module is unfamiliar to me, as it looks like this: function uuidToString(uuid) { } function uuidFromString(uuid) { } function cre ...

node.jstypescriptnode-modules

Why do I keep being told that the property doesn't exist?

I have the following code in one file: function test<T extends {}>(arg:T):any { return arg.name } In another file, I have this code: interface IItem { name: string } console.log(test<IItem>({name:'3'})) When I try to access ...

typescript