角度材质 - 多选 - 最后选择的值答案

【问题标题】：Angular Material - Multiple Select - Last selected value角度材质 - 多选 - 最后选择的值
【发布时间】：2020-07-18 07:07:26
【问题描述】：

使用 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 事件以查看是否有任何我可以使用的东西（比如，以前的值，所以我可以比较），但遗憾的是，我什么也没看到。

有可能实现吗？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以使用@DaggeJ 的解决方案以及模板驱动源，如下所示。

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

@ViewChild('mySelect') mySelect: FormControl;

public ngAfterViewInit() {
    this.mySelect.valueChanges.pipe(pairwise()).subscribe(([prev, next]: [any, any]) => {
       console.log(prev + ' -> ' + next);
    });
}

【讨论】：

【解决方案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 之所以存在，是因为主题不会发出任何值，直到它有一个先前的 AND 一个当前值。

【讨论】：

【解决方案3】：

如果您使用 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]) => ... );

【讨论】：