Ion-select selected value in loop [SOLVED]

Ionic Framework
1

So Im making an app with IONIC. Im using the tag ion-select & ion-select-option to make it possible to select one or multiple options and send these to typescript (works so far).

Now I want that someone is able to edit their options. This means some of the ion-select-option should be [selected] (checked true).

Does anyone know if that is possible? I am using 2 different arrays for this.

user.companies (all the companies a user has added to the application)

blocked.companies (all the blocked companies an used has added to their blocked contact)
I am using user.companies to display all the ion-select-option choices (the companies to select)

If the ion-select-option value exists in the blocked.companies array is should be selected

This is my code. If more clarification is needed please tell me and I will provide it. Thanks

HTML

<ion-select multiple="true" [(ngModel)]="selectedCompanies" class="selectModal" placeholder="Add one or more companies" text="Hello" okText="Ok" cancelText="Dismiss">
    <ion-select-option selected="{{isSelected}}" *ngFor="let company of user.company; let i=index" value="{{company.company_name}}">{{company.company_name}}</ion-select-option>
</ion-select>

Typescript

import { Component, OnInit, Input } from '@angular/core';
import { ModalController} from '@ionic/angular';
import { LoginService } from 'src/app/login.service';

@Component({
  selector: 'edit-blocked',
  templateUrl: './edit-blocked.page.html',
  styleUrls: ['./edit-blocked.page.scss'],
})
export class EditBlockedPage implements OnInit {
  user = this.loginSrvc.user;
  blocked = this.loginSrvc.editNumber;
  blockedToggle: any;
  minDate = new Date().toISOString();
  selectedCompanies = [];

  isSelected = false;

  constructor(private modalController: ModalController, private loginSrvc: LoginService) {}

  }
}

JSON


      "blocked": [
        {
          "id":20,
          "name":"X X",
          "number":"06-12345678",
          "address":"Address",
          "alwaysBlocked":true,
          "companies": [
            "Company1","Company2","Company3"
          ]
        }
     ]

"user": [
  {
      "id": 1,
      "gender": "0",
      "fullname": "X X",
      "number": "06-12345678",
      "mail": "user@company.com",
      "password": "admin1",
      "company": [
        {
          "company_id": 1,
          "company_name": "Company1",
        },
        {
          "company_id": 2,
          "company_name": "Company2",
        },
        {
          "company_id": 3,
          "company_name": "Company3",
        },
        {
          "company_id": 4,
          "company_name": "Company4",
        }
2

Any time I see an ngFor on an element where there is another bound property (incidentally, always prefer [selected]="isSelected" over selected="{{isSelected}}"), and that other bound expression does not depend on the loop variable (company) here, my spidey sense tingles.

isSelected is going to be the same for every iteration of company. That’s probably not what you want. I would suggest redesigning it so that the selection state becomes a property of each company.

3

I found the solution with changing the HTML code

<ion-select multiple="true" [(ngModel)]="selectedCompanies" class="selectModal" placeholder="Add one or more companies" text="Hello" okText="Ok" cancelText="Dismiss">
    <ion-select-option selected="{{isSelected}}" *ngFor="let company of user.company; let i=index" value="{{company.company_name}}">{{company.company_name}}</ion-select-option>
</ion-select>

to:

<ion-select multiple="true" class="selectModal" placeholder="Add one or more activities" text="Hello" okText="Ok" cancelText="Dismiss" (ionChange)="activitySelect($event)">
          <ion-select-option *ngFor="let activity of user.activity; let i=index" value="{{activity.activity_name}}">{{activity.activity_name}}</ion-select-option>
        </ion-select>

What I did change is removing the [(ngModel)] what made it not possible to use selected to start with.
Next I changed the

selected="{{isSelected}}"

To

[selected]="blocked.companies.includes(userCompany.company_name)"

This way I loop throught the blocked.companies, and if it includes the userCompany it will return true and enable selected.

4

The post above this one that is currently marked as the solution should not be emulated. Angular’s change detection evaluates bound template expressions zillions of times - never call functions from inside them, because they are impossible to optimize away. Only use simple property references. Do all the heavy lifting of setting up and managing the state of these properties in the controller, because only there do you know exactly when they need to be updated.

In some way or form, the template here should look like this:

[selected]="company.isSelected"

EDIT: That’s assuming we’re using selected in the first place. Assigning directly to a backing ngModel-bound property or a reactive FormControl would be my first choice here.