Showing array of object with checked field

Ionic Framework
1

Hello pals
I have some issue printing the value of an array. I have this array:

public loadKinds: LoadKinds[] = [];

where LoadKinds is defined like this:

export class LoadKinds {
id: number;
name: string;
created_at: string;
updated_at: string;
checked: boolean;
}

I have a slice for showing info and on the page 3 I show that array showing if is checked or not. I showed it like this:

¿Qué puede cargar este auto?

{{lk.name}} {{lk.checked}}

On my .ts, I load from backend the list of loadKinds for this car Id. Then, I checked as true if the car have this load kind:

for (const lk of this.loadKinds) {
      lk.checked = false;
    }
    for (const clk of this.car.load_kinds) {
      for (const lk of this.loadKinds) {
        if (lk.id === clk.id) {
          lk.checked = true;
          break;
        }
      }
    }

I obtain something like this on navigator and another thing on console:

imagen
imagen322×559 6.54 KB

imagen

I have not idea what is happen here. I show this on console the slice page change event using a code like this:

for (let index = 0; index < this.loadKinds.length; index++) {
  const element = this.loadKinds[index];
  console.log(element.name, element.checked);
}

Once we enter to the slice data is already read.

Please, if someone see some issue here or have same problem, let me know how to solve it.

2

Sorry, HTML code was interpreted by navigator. The code looks like this:

imagen
imagen1291×373 38.9 KB

3

People, it seems that there is a scroll failure. I define ion-content like this:

<ion-content #content [scrollEvents]=“true” (ionScroll)=“logScrolling($event)”>

and it still without show all items.

4

Can you please post all the code that ever modifies car in this page controller?

Incidentally, and this is in no way a personal attack on you, but I find it inexplicably insane that the following code even compiles:

for (const lk of this.loadKinds) {
  lk.checked = false;
}

This is why I consider const in JavaScript less than worthless. What on earth is the point of declaring something const if you can modify its innards like this?

5

LOL, why I will consider an attack that, LOL
I thought the same but this is teh way that VS Code and typescript extensions told me about how it is.

The current problem is the scroll, because ion-list and ion-item only show me part of data. I think it is because they are multiple lists inside ion-slide.

6

I FOUND THE SOLUTION PEOPLE.

In my .scss I have the follow:

ion-slides {
height: 100% !important;
}

and it would be:

ion-slides {
height: auto !important;
}

7

FWIW, you should be able to shut that up by setting prefer-const to false in tslint.json.

8

Super, thanks. I am glad of your inconditional help.
I am having another issue that I am posting. Please, could you help me?