Nano Hash - криптовалюты, майнинг, программирование

Как получить предыдущее и новое значение из Angular mat-select?

Привет. Я использую angular 6 и материал agular, и у меня есть массив строк, который я отображаю в поле формы выбора mat. Если пользователь выбирает один элемент, а затем другой, мне нужно отслеживать, какое было предыдущее значение, а какое - новое.

До сих пор мне удалось получить текущее значение с помощью $ event.value, но я не нашел способа сохранить или получить то, что было предыдущим значением.

   <mat-select  placeholder="Choose..." (selectionChange) ="checkTitle($event.value);">
            <mat-option *ngFor="let option of Titles; trackBy: trackByFn" [value]="option.title">
              {{option.title}}
            </mat-option>
    </mat-select>

Пока я не придумал, как решить эту проблему. Помощь приветствуется.

angular angular-material
15.08.2019

Ответы:


1

Вы можете обрабатывать предыдущее и текущее значение, вставив значение в Subject, и наблюдать за этим Subject с помощью парного оператора. Этот оператор выдаст предыдущее и текущее значение потока. (https://www.learnrxjs.io/operators/combination/pairwise.html)

пример:


export class YOU_COMPONENT{

  private data: Subject<any> = new Subject<any>();

  checkTitle(value){
    this.data.next(value);
  }

  observeDataChange():Observable<[]>{
     // this return an observable of an array that contains [previous, current] data
     return this.data.asObservable().pipe(pairwise());
  }

}
15.08.2019
  • Это очень полезно. Итак, если я хочу повторно использовать компонент, мне нужно будет создать тему для каждого элемента? Или я могу просто использовать ту же функцию checkTile ()? 15.08.2019
  • К сожалению, вам нужно создать тему для каждого элемента, или, если вы хотите сделать свой компонент многоразовым и предоставить эту функцию, вы можете обернуть его в компонент настраиваемого выбора. Этот пользовательский будет содержать его собственную тему, которая обрабатывает предыдущее и текущее значение. И он должен испускать эти значения. На этом этапе вы получите новый компонент выбора, который можно использовать везде и всегда выделять два значения. 15.08.2019
  • Можно ли предоставить для этого рабочий образец. Я новичок в Angular, и я ищу это решение. Заранее спасибо за помощь @SaifJerbi 09.11.2019
  • Это не уловит первое изменение. Только со второго. 02.04.2020

    • 2

    В дополнение к ответу Саифа Джеба, если вы используете formControl или FormGroup для получения / ввода значения, вы можете использовать formControl.valueChanges, что

      <mat-select [formControl]="control">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>

  control=new FormControl()

  ngOnInit()
  {
    this.control.valueChanges.pipe(
      startWith(this.control.value),
      pairwise()
    ).subscribe(
      ([old,value])=>{
        console.log(old,value)
      }
    )
  }

    Это необходимо для startWith (this.control.value), чтобы первое изменение испускало значение

    См. stackblitz.

    15.08.2019

    3

    Есть свойство для MatList [selected], которое принимает логическое значение, например, true или false.

    Так что при обновлении или выборе значения. Создайте пару "ключ-значение", которая при выборе будет иметь значение true.

    17.09.2019

    4

    Вы можете просто иметь переменную, в которой вы сохраняете предыдущее значение:

    prevVal: string;

checkTitle(newVal) {
  if (this.prevVal) {
    console.log(this.prevVal, newVal);
    // do stuff
  }
  // after processing, store the new val as the prev val
  this.prevVal = val;
}
    15.08.2019
  • Откуда бы вы взяли oldValue ... вот вопрос, который мы пытаемся решить :) 17.12.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..