Unable to change values in ion-select-multiple

Question

I am using ion-select-multiple. It works perfectly fine normally. I have a requirement to pre select few options in it. I searched the web and found the solution, but after pre assigning the values, now when I try to change, it gives me error.

Here is my home.html code:

 <ion-select multiple="true" okText="Okay" cancelText="Dismiss" [(ngModel)]="followers" [value]="{$value: followers}">
    <ion-select-option value="brown">Brown</ion-select-option>
    <ion-select-option value="blonde">Blonde</ion-select-option>
    <ion-select-option value="black">Black</ion-select-option>
  </ion-select>

home.ts

followers = ['brown','black'];

Please note, Brown and Black are pre selected, but if I try to select/de-select anything from list, it gives error -

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'model: 12w 3'. Current value: 'model: [object Object]'.

This error goes away if I remove this code: [value]="{$value: followers}".

How do I manage this error?

Add error screenshot:

Hi user2828442. I've edited a lot of chatty material from your questions in the past, and you will have received the notifications from the Stack Overflow platform. Some of your material has a needy, begging quality, and suggests you think that displays of helplessness will cause people to pity your situation and/or feel coerced into the social obligation of assisting the less fortunate. This is not appropriate behaviour for a volunteer platform. Please stick to technical writing. — halfer

Neha Shah Neha Shah · Accepted Answer · 2020-03-27T05:48:16

Add thid piece of code to your compoent.ts file...

import { Component, Input, ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';

 @Component({
   selector: 'component',
   templateUrl: 'component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })

 constructor(private cdRef:ChangeDetectorRef){} 
 ngAfterViewInit() {
    this.cdRef.detectChanges();
 }

Unable to change values in ion-select-multiple

1 Answers