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

Angular Forms - получение того, что изменилось от ValueChange

Я использую реактивные формы Angular, и я нахожусь на пути к реализации функциональности Undo / Redo.

Я бы хотел «упаковать» последовательные изменения в одном поле в одно действие отмены. Я думаю, что для этого мне нужно будет вычислить какую-то дельту, возможно, используя библиотеку различий (например, this).

Позвольте мне объяснить это на примере:

  • пользователь меняет поле «имя» на «Том»
  • пользователь выбирает поле «фамилия» на «Кошка»
  • пользователь меняет поле «имя» на «Джерри», пишет очень медленно или выходит и вводит поле несколько раз.
  • пользователь нажимает Отменить.

Я хочу, чтобы действие «Отменить» восстановило значение «Том» в поле «имя», не передавая значения «Джерр», «Джер» и т. Д.

Это что-то, что можно сделать, только прикрепив к form.valuechange через преобразования Observable, или есть какая-то альтернатива, лучше подходящая для этой задачи?

У меня нет кода, которым можно поделиться, потому что в настоящее время я просто изучаю, как реализовать эту функцию, поэтому, пожалуйста, избавьте меня от мантры «покажи нам, что у тебя есть»;)

Спасибо!

angular rxjs angular-reactive-forms
23.09.2019

  • Я бы взялся за эту задачу, используя Command Pattern. Инкапсуляция каждого пользовательского изменения в объект команды с помощью методов do и undo. Затем вы можете создать стек с этими командами и отменить или повторить действие по своему усмотрению. 23.09.2019
  • Я думаю, что лучше всего использовать состояние. redux.js.org/recipes/implementing-undo-history Хотя эта ссылка для прямого Redux, я уверен, что реализация в NgRx практически идентична. 23.09.2019
  • ИМХО это немного излишне использовать redux для простой задачи отмены, служба может легко выполнять эту работу, и если вы хотите, чтобы состояние, просто используйте Observable. Возможный дубликат заголовка: stackoverflow.com/questions/44355194/ 23.09.2019
  • Redux и подобное решение, IMHO, не подходят для использования с реактивными формами: оба (Redux и FormGroup) предназначены для того, чтобы быть единственным источником истины. Поэтому я склонен думать, что размещение команд поверх подсистемы форм - это антипаттерн с большой избыточностью. Я хотел бы ГЕНЕРИРОВАТЬ эквивалент команд из формы, а не наоборот. 24.09.2019
  • @Robert, решение, на которое вы ссылаетесь, - это обычный способ действий, который основан только на значении всей формы и не является надежным для добавления массивов и других операций, несовместимых с простым вызовом form.setValue. И он не относится к нескольким изменениям в одном и том же поле: я хотел бы объединить их в одну операцию, но эти упрощенные решения этого не делают. 24.09.2019

Ответы:


1

Вы можете добиться использования операторов rxjs debounce и парно, например

formControl=new FormControl('')

this.formControl.valueChanges.pipe(
    startWith(this.fromControl.value),
    debounceTime(500),
    pairwise())
    .subscribe(([old,value])=>{
      console.log(old,value)
    })

См. stackblitz.

Или используйте только debounceTime

this.formControl.valueChanges.pipe(
        debounceTime(500),
        .subscribe((res)=>{
          this.myLog.push(res)
        })
23.09.2019
  • Спасибо. Я искал способ получить только изменения, а не все значение формы. Думаю, мне придется обработать значение формы через библиотеку diff, чтобы узнать, что именно изменилось в значениях формы. 24.09.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..