Question

我有一个项目，其中有一个包含mat-select选择器的表单。每当用户更改输入时，我都会向用户显示一个对话框以确认此操作。现在：

selectionChange()会在更改值时发出通知，并将新值作为$event传递。

是否有一种方法可以使旧值返回，以防用户取消对话框？

我不想做这种肮脏的方式，例如将当前值保存在单独的成员变量中。

模板：

<mat-select [(ngModel)]="selectedTextCountingType" 
            (selectionChange)="select($event)">
  <mat-option *ngFor="let option of countingTypeOptions" 
              [value]="option.value">
    {{option.text | translate}}
  </mat-option>
</mat-select>

TS：

select(option: MatSelectChange): void { 
    this.openConfirmDeletionDialog().pipe(
        filter((respose) => {
            // HERE IS WHERE I NEED IT.
            if(Boolean(reponse) === false) {
                this.selectedTextCountingType = oldValue;
            }
            return Boolean(reponse); 
        })
    )
}

Answer 1

实际上，您有一种针对您预期行为的解决方法，因为在触发事件[["Porcupine", "Llama", "Macaque", "Nasica"], ["Antelope", "Bisont", "Crocodile", "Dinosaur"], ["Elephant", "Fly", "Gnu", "Hyena"], ["Orangutan", "Piton", "Quetzal", "Rinho"]]时，您已将模型绑定到该选择垫上，因此您的元素已经更新，但是如果您打印出该模型，它将是在选择标记最后一次通过角度更新时形成的文字，在您的情况下，因为您是类型列表的ngFor，以后可以通过文本，值或您可能更喜欢的任何其他属性找到它。

selectionChange

，在您的组件中，该值应为字符串

<mat-select [(ngModel)]="selectedTextCountingType" 
            (selectionChange)="select($event, '{{selectedTextCountingType.value}}')">
  <mat-option *ngFor="let option of countingTypeOptions" 
              [value]="option.value">
    {{option.text | translate}}
  </mat-option>
</mat-select>

Mat select-获取选择的旧值Change

1 个答案: