Получение значения раскрывающегося списка до и после выбора в Angular

Question

В настоящее время я работаю над проектом, в котором я использую angular.У меня есть раскрывающееся поле, с помощью которого я должен обновить статус в бэк-энде.Есть ли способ получить старое значение и текущее значение выпадающего поля.

Я уже пробовал с интерфейсом OnChanges и ничего не смог достичь.Предложите некоторый подход для получения значения до и после выбора.

Answer 1

Вы можете создать FormControl и связать его с шаблоном.

Экземпляр FormControl имеет valueChanges Наблюдаемый объект, на который вы можете подписаться, чтобы получить текущее выбранное значение этого элемента управления.

Но если вам также нужно предыдущее значение, вы можете использовать оператор pairwise Rxjs. Примерно так:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { pairwise } from 'rxjs/operators';
import { Subscription } from 'rxjs';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, OnDestroy {
  name = 'Angular';
  selectListValue: FormControl = new FormControl();
  options = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
  ];
  subscription: Subscription;

  ngOnInit() {
    this.subscription = this.selectListValue.valueChanges
      .pipe(pairwise())
      .subscribe(changes => console.log(changes));
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

И в вашем шаблоне:

<select [formControl]="selectListValue" name="" id="">
  <option value="">Please select an Option</option>
  <option *ngFor="let option of options" [value]="option">{{option}}</option>
</select>

PS : он не даст вам значения при первом выборе, так как значение по умолчанию FormControl равно undefined. Если вы хотите использовать предыдущее и следующее значение в первый раз, присвойте значение по умолчанию для FormControl.