【问题标题】:Ion-Select Options Wont Refresh After Changing The Array Of Objects更改对象数组后,离子选择选项不会刷新
【发布时间】:2019-08-30 21:47:06
【问题描述】:

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

我在第一个上设置了一个 (ngModelChange) 我更改了第二个中显示的元素数组 但它不起作用 请帮忙

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

我预计第二个选择的项目越来越少,但我不会改变 即使我将其设置为空数组

【问题讨论】:

    标签: javascript angular ionic-framework ionic4


    【解决方案1】:

    检查此链接。我想你也有同样的问题。

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

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

    现在尝试如下更改您的第二个选择项代码以使其正常工作。

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

    【讨论】:

    • 提前致谢
    • 实际上我认为为相反的条件添加微调器是个好主意
    猜你喜欢
    • 2019-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多