Question

使用mat-select时，您可以订阅事件“ selectionChange”。

<mat-select
    [(ngModel)]="value"
    name="someName"
    multiple="true"
    (selectionChange)="handleEvent($event)"
>
    <mat-option
        *ngFor="let val of values"
        [value]="val"
    >
        {{ val }}
    </mat-option>
</mat-select>

handleEvent(event: MatSelectChange) {
    console.log(event.value); // => array of values
}

这将发出一个MatSelectChange，您可以在其中访问选择的当前值。

问题是，当使用多重选择时，value属性将包含一个包含所有当前选定值的数组。

我需要的是知道用户选择的最后一个值是什么。我已经打印出MatSelectChange事件以查看是否可以使用任何东西（例如以前的值，以便可以进行比较），但是，可惜的是，我什么都没看到。

有可能实现吗？

Answer 1

如果您使用FormControl而不是ngModel，则可以订阅valueChanges Observable以获取上一个和下一个值。这里有一篇涉及该主题的文章：Form control valueChanges gives the previous value

基本上，您需要做的是在ts文件中声明一个新的FormControl；

formControl = new FormControl();

..并像这样绑定到它；

<mat-select
    [formControl]="formControl"
    name="someName"
    multiple>

...并检查是否有此类更改；

formControl
  .valueChanges
  .pipe(pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

Answer 2

由于我无法使用ReactiveForm并且必须坚持使用“模板驱动”，所以我提出了以下解决方案：

pairwise()

<mat-select
    [(ngModel)]="value"
    name="someName"
    multiple="true"
    (selectionChange)="mySubject.next($event.value)"
>

另一方面，订阅主题时：


this.mySubject.pipe(startWith(null), pairwise()).subscribe({
    next: (values: number[]) => {
        const previousValue = values[0];
        const currentValue = values[1];

        // previousValue will be null on first call
        const newValue = previousValue === null ? 
            currentValue[0] : currentValue.find((value: number) => !previousValue.includes(value));
    }
)

startWith之所以存在，是因为主题只有在具有先前值和当前值之后才会发出任何值。

角度材质-多项选择-上一次选择的值

2 个答案: