ion-select selected value in loop-CodePudding

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"  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": "[email protected]",
      "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",
        }

CodePudding user response：

Let suppose You have company1,2,3 selected by default. In this case You should only add an array of their values.

selectedCompanies:Array<string> = ['Company1', 'Company2', 'Company3']

CodePudding user response：

html file:

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

ts file:

get filtredCompanies(){
if(!!this.user){
let blockedCompanies : Array<string> = this.yourJsonData.blocked.companies
let userCompanies:Array<string> = this.user.company
let filtredCompanies =[]

userCompanies.forEach((company:any)=>{

if(blockedCompanies.includes(company.company_name)){
filtredCompanies.push(company.company_name)
}
else{
//if You want reversed filter
//filtredCompanies.push(company.company_name)

}


})
return filtredCompanies;
}
return [];


}

I home this answer could fix your issue.

CodePudding user response：

I found the solution with changing the HTML code

<ion-select multiple="true" [(ngModel)]="selectedCompanies"  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"  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}}"

[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.