How to pass i=index value from ionic 4 html file to .ts file for method?

Thomas DeGroot

I have a *ngFor that uses let i = index and indexes the array as expected.

html

  <div *ngFor="let fromItem of listResults let i=index;">
    <ion-item  (click)="openSubsetPage( i )" detail>
      <ion-label>{{fromItem.Name}}</ion-label>
      <ion-badge color="light">{{filter}} / {{listNumber[i].Questions.length}}</ion-badge>
    </ion-item>
  </div>

What I'm trying to accomplish is to use the [i] from the html file in this.filter on line 5 of my .ts file. I wish to replace [0] with [i]. I'm not sure what to do.

.ts

GetList(){
  this.storage.get(this.value).then((val) => {
    this.listResults = JSON.parse(val);
    this.listNumber = this.listResults;
    this.filter = this.listNumber[0].Questions.filter((c: { input: any; }) => !!c.input).length;
  });
}
Nikhil

If you want to calculate the filter value before loading the view, you have to create another array filter[]and store the calculated value.

let filter[];

GetList() {
  this.storage.get(this.value).then((val) => {
    this.listResults = JSON.parse(val);
    this.listNumber = this.listResults;

    this.listNumber.forEach((item, index) => {
      this.filter[index] = this.listNumber[index].Questions
        .filter((c: { input: any }) => !!c.input).length;
      });
    });
  }
}

and use in template

<ion-badge color="light"> {{ filter[i] }} / {{listNumber[i].Questions.length}}</ion-badge>

Another way is to create a method that computes this filter value for a list item at a given index.

getFilter(index) {
  return this.listNumber[index].Questions.filter((c: { input: any }) => !!c.input).length;
}

and use in template

<ion-badge color="light"> {{ getFilter(i) }} / {{listNumber[i].Questions.length}}</ion-badge>

Related

Angular-*ngFor: Pass i from index of ts file

candid word I am trying to pass the index from ngFor to my ts file without success. I actually don't know what to do. Can someone tell me how to pass the index value from html to ts file? I thought using @Input would be the solution, but nothing happened... Th

Angular-*ngFor: Pass i from index of ts file

candid word I am trying to pass the index from ngFor to my ts file without success. I actually don't know what to do. Can someone tell me how to pass the index value from html to ts file? I thought using @Input would be the solution, but nothing happened... Th

IONIC/Angular: HTML doesn't show info from ts file

Scholes I have a problem with displaying the information on my html page, I send the object from "home-page.ts" to "informacion-bar.page.ts" and then use {{res? .title}} shows that they work on my other project, but I don't know why it's not working now, so I

IONIC/Angular: HTML doesn't show info from ts file

Scholes I have a problem with displaying the information on my html page, I send the object from "home-page.ts" to "informacion-bar.page.ts" and then use {{res? .title}} shows that they work on my other project, but I don't know why it's not working now, so I

IONIC/Angular: HTML doesn't show info from ts file

Scholes I have a problem with displaying the information on my html page, I send the object from "home-page.ts" to "informacion-bar.page.ts" and then use {{res? .title}} shows that they work on my other project, but I don't know why it's not working now, so I

Pass variable from .ts to .html in ionic and angular

username I am new to ionic 4, can get angular data from http and retrieve json data from json, in console, i can get json perfectly, how can i pass these data from .ts to .html and display them like every display home.page.ts import { Component } from '@angula

Pass variable from .ts to .html in ionic and angular

username I am new to ionic 4, can get angular data from http and retrieve json data from json, in console, i can get json perfectly, how can i pass these data from .ts to .html and display them like every display home.page.ts import { Component } from '@angula

Pass variable from .ts to .html in ionic and angular

username I am new to ionic 4, can get angular data from http and retrieve json data from json, in console, i can get json perfectly, how can i pass these data from .ts to .html and display them like every display home.page.ts import { Component } from '@angula

Pass variable from .ts to .html in ionic and angular

username I am new to ionic 4, can get angular data from http and retrieve json data from json, in console, i can get json perfectly, how can i pass these data from .ts to .html and display them like every display home.page.ts import { Component } from '@angula

How to get or set properties of ionic component from TS file?

dungeon I would like to know how I can getor setfrom a specific property or characteristic of the ionic composition TypeScriptfile. Suppose I have an input component on my HTMLpage : <ion-item> <ion-input type="text" [(ngModel)]="testText"></ion-input> <

How to pass value from HTML field to component ts

Hasoun GH I'm sending a value from an HTML page to a TS component without using a form, I get a build error when trying to npm run build, here is the example: I use > npm run dev or > ng build no problem, but when I build it for production it gives an error us

How to pass value from HTML field to component ts

Hasoun GH I'm sending a value from an HTML page to a TS component without using a form, I get a build error when trying to npm run build, here is the example: I use > npm run dev or > ng build no problem, but when I build it for production it gives an error us

How to pass data from one component to another in ts file?

Ender 99 I know using @Input to pass data between components in html, but how to pass them through ts file? This is the parent file. I want to pass this.category and this.data to SelectCustomersProjectModalComponent. public openSelectRolesModal() { thi