Ion-Select Options Wont Refresh After Changing The Array Of Objects

问题

I Have 2 Ion-Selects The Second One Should Be Updated When The First One Changes

I've Setup An (ngModelChange) On The First One And I Change The Array Of Elements Which Are Shown in Second One But It Wont Work Please Help

<ion-item text-right>
    <ion-select
            interface="alert"
            [interfaceOptions]="receiveDatesOptions"
            [compareWith]="compareWithDates"
            [(ngModel)]="receiveDate"
            (ngModelChange)="changedReceiveDate()"
            [selectedText]="receiveDate.datePersian">
        <ion-select-option
                *ngFor="let date of currentReceiveDates"
                [value]="date">{{date.datePersian}}
        </ion-select-option>
    </ion-select>
</ion-item>


<ion-item text-right>
    <ion-select
            interface="alert"
            (ngModelChange)="changeDeliveredDate()"
            [interfaceOptions]="deliverDatesOptions"
            [compareWith]="compareWithDates"
            [(ngModel)]="deliverDate"
            [selectedText]="deliverDate.datePersian">
        <ion-select-option
                *ngFor="let date of currentDeliverDates"
                [value]="date">{{date.datePersian}}
        </ion-select-option>
    </ion-select>
</ion-item>

    changedReceiveDate() {
        this.receiveTimes = this.receiveDate.parts;
        this.currentDeliverDates.splice(0, 2);
        // even if set it to an empty array it wont help
    }

i expected that the second selects items get less and less but i wont change even if i set it to an empty array

回答1:

Check this links. i think you have same issue.

https://forum.ionicframework.com/t/ionic-4-ion-select-option-underlying-list-not-updating/158251

https://github.com/ionic-team/ionic/issues/16453

try change your second select item code as below for now to make it work.

<ion-item text-right *ngIf="refreshed">
     <ion-select
        interface="alert"
        (ngModelChange)="changeDeliveredDate()"
        [interfaceOptions]="deliverDatesOptions"
        [compareWith]="compareWithDates"
        [(ngModel)]="deliverDate"
        [selectedText]="deliverDate.datePersian">
    <ion-select-option
            *ngFor="let date of currentDeliverDates"
            [value]="date">{{date.datePersian}}
    </ion-select-option>
   </ion-select>
</ion-item>

changedReceiveDate() {
    this.refreshed = false;
    this.receiveTimes = this.receiveDate.parts;
    this.currentDeliverDates.splice(0, 2);
    setTimeout(()=>{
        this.refreshed = true;
    })

}

来源：https://stackoverflow.com/questions/57727662/ion-select-options-wont-refresh-after-changing-the-array-of-objects

标签

javascript

angular

ionic-framework

ionic4