更改对象数组后,离子选择选项不会刷新

问题描述:

我有2个离子选择 当第一个更改时,第二个应该更新

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

我在第一个上设置了(ngModelChange) 然后我更改第二个元素中显示的元素数组 但它行不通 请帮助

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

选中此链接.我认为你也有同样的问题.

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

}