Showing array of object with checked field

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

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.

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

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.

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?

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.

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;
}

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

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