Angular Материал - множественный выбор - последнее выбранное значение

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

Так как я не могу использовать ReactiveForm и должен придерживаться Template Driven, я пришел к такому решению:

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 присутствует, поскольку субъект не будет излучать никакого значения, пока не получит предыдущее И текущее значение.

Answer 2

Если вы используете FormControl вместо ngModel, вы можете подписаться на valueChanges Observable, чтобы получить предыдущее и следующее значения. Здесь есть сообщение, которое описывает эту топи c: Значение элемента управления FormChanges возвращает предыдущее значение

В основном вам нужно объявить новый FormControl в вашем ts-файле;

formControl = new FormControl();

.. и привязать к нему вот так;

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

... и проверить на наличие изменений вот так;

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