Question

我将对象选择绑定到对象ID，当我更改选项时会打开一个确认警报，我希望所选的选项仅在我说“确定”时才更改，如果我取消它，则保留我尝试选择的选项已选择，不在值上而是在显示上。

我尝试将ngModel设置回原来的值，但这无济于事，因为我的ngModel值没有更改，仅更改了所选选项。

<mat-select title="Repartidor" placeholder="Repartidor" [ngModel]="order._ShippingProviderId" (selectionChange)="shippingProviderChange(order, $event)">
    <mat-option *ngFor="let driverStatus of driverStatuses" [value]="driverStatus._ShippingProvider._Id"> 
        {{driverStatus._ShippingProvider._Name}}
    </mat-option>
</mat-select>

mat-select保留我未确认选择的选项，而不保留最后一个。由于我的选项已绑定到对象，因此无法将选项重置为none。

更新＃1：

我尝试过，并且确实将选定的值更改为上一个，但没有将选定的选项设置为其原始状态。

shippingProviderChange(order: IOrder, event: MatSelectChange){
        if(confirm("¿Quieres asignar este repartidor?")) {
            // change option
            console.log(order._ShippingProviderId);
            order._ShippingProviderId = event.value;
            console.log(order._ShippingProviderId);
        }
        else{
            // keep the same option selected
        }
}

Answer 1

我认为您需要这个：

<mat-select 
    title="Repartidor" 
    placeholder="Repartidor" 
    [ngModel]="order._ShippingProviderId"
    (selectionChange)="shippingProviderChange(order, $event)"
    [compareWith]="compareShippingProviderId"
>
    <mat-option *ngFor="let driverStatus of driverStatuses" [value]="driverStatus._ShippingProvider._Id"> 
        {{driverStatus._ShippingProvider._Name}}
    </mat-option>
</mat-select>

将[compareWith]="compareShippingProviderId"添加到您的垫选择中然后将此compareShippingProviderId添加到您的打字稿中

compareShippingProviderId = (val1: string, val2: string) => val1 == val2;

当ngModel值更改后，这将有助于通过Mat-select来显示正确的选择。

来自https://codeburst.io/angular-material-select-module-the-comparewith-function-9dfdb4035373

的一些解释

我们需要使用Angular Material提供的compareWith函数，因为选择框选项中的数据不在DOM中。因为数据不在DOM中，所以值实际上是对象，而不仅仅是字符串。因此，它需要一个函数来确定表单值对象和选项值对象之间的相等性，以确定它们是否匹配。直到用户实际单击（或点击）进入“选择框”字段，数据才会显示。出于性能原因，我们可以假设Angular / Material这样做。

Answer 2

我们发现处理这些问题的最佳方法是设置一个单独的变量以跟踪实际值，并根据确认结果有条件地对其进行设置。 mat-select-trigger消除了它来回切换的出现。

如果任何事情都取决于选择基于它的更改和运行代码的值，则不必担心。它可以基于实际跟踪值的变量的更改（在这种情况下为selectedValue）运行，也可以在onSelectionChanged方法内部触发。

html：

<mat-select
   [(ngModel)]="userSelectedValue"
   (selectionChange)="onProgramChanged($event.value)">
    <mat-select-trigger>{{selectedValue}}</mat-select-trigger>
    <mat-option *ngFor="let option of myOptions> {{option}}<mat-option>
</mat-select>

ts：

userSelectedValue; // ngmodel value
selectedValue; // actual value you use

onSelectionChanged() {
   this.openConfirmationDialog((confirmed) => {   //prompt user for confirmation
       if(confirmed === 'confirm') {
         this.selectedValue = this.userSelectedValue;
         this.dologic()
       } else {
         this.userSelectedValue= this.previousUserSelectedValue;
       }
 }

垫选择确认选择

2 个答案: