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

Инициировать событие при повторном выборе того же значения при выборе мата

Я работаю над mat-table, который реализует разбивку на страницы, фильтрацию, выборку и т. д. У меня есть этот mat-select в одном из столбцов заголовков, который я использую для установки глобального значения для всех остальных mat-select в том же столбце... Вот так

введите здесь описание изображения

Пока все работает хорошо, но, скажем, я выбираю глобальное значение, а затем увеличиваю pageSize таблицы, строки, в которых уже был выбран выбор, останутся такими же, но новые дополнительные строки будут иметь значение по умолчанию; теперь, если я снова перейду к глобальному mat-select и нажму на ту же опцию, чтобы применить значение к новым строкам, ничего не произойдет, поскольку я на самом деле не изменяю выбор; поэтому я пытаюсь снова запустить событие SelectionChange для mat-select, хотя значение на самом деле такое же.

Любая помощь приветствуется, я думаю, что должен быть действительно простой способ сделать эту работу, но я этого не вижу; если нужна дополнительная информация, дайте мне знать!

typescript events angular drop-down-menu angular-material
13.11.2018

  • удачи, мне любопытно, что вы придумали 14.11.2018

Ответы:


1

Я знаю, что уже поздно, но я пришел, чтобы найти решение.

Обычно мы используем @Output() selectionChange для передачи выбранного значения функции в нашем файле .ts и делаем там то, что хотим. Но это не работает, если мы выбираем одно и то же значение.

Решение:

Вместо этого нам нужно использовать @Output() openedChange, который будет передавать true (открыто) или false (закрыто). Нас интересует, когда мы закроем компонент mat-select. К сожалению, openChange не имеет прямого доступа к выбранному нами значению. Таким образом, мы просто создаем переменную-член, которая привязывается к выбранному нами значению, и всякий раз, когда openChange срабатывает и возвращает false, мы будем использовать эту переменную-член.

Вот основной код:

ваш-component.component.html

<mat-form-field>
  <mat-label>Options</mat-label>
  <mat-select *ngFor="let option of allOptions;"
              (openedChange)="onSelectionChange($event)"
              [(value)]="selectedVariable">
    <mat-option [value]="option">
      {{option.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

ваш-component.component.ts

  selectedVariable: any;

  constructor() {}

  ngOnInit() {
    //...
  }

  onSelectionChange(opened: boolean) {
    if (!opened && this.selectedVariable) {
      // Do whatever you want here with `this.selectedVariable`
      console.log(this.selectedVariable);
    }
  }

Примечание. В функции onSelectionChange вам нужно убедиться, что что-то действительно выбрано. Потому что в противном случае функция будет продолжаться, если пользователь нажмет на выделение и щелкнет от него, ничего не выбрав.

01.10.2019
  • В конце концов, если это решит проблему, это может помочь кому-то еще :) не могли бы вы реализовать это в Stackblitz или подобном, чтобы увидеть это в действии? 01.10.2019
  • @IvanS95 ИванS95 Я пытался создать демо в Stackblitz, но у меня возникли проблемы с материальными компонентами (например, mat-select). Может быть, если я чувствую вдохновение в другой раз, я попробую еще раз. 05.10.2019
  • Спасибо за это. Я потратил много времени, чтобы найти это. Вот образец для таких, как я. stackblitz.com/edit/angular-mat-select-catch-same- выбор 04.02.2020
  • @jornathon Отлично, спасибо за это. Я быстро взглянул и, похоже, получил ожидаемое поведение. 11.02.2020

    • 2

    Это немного "обходной путь", но мне интересно, можете ли вы использовать:

    @Output() openChange: EventEmitter

    Событие возникает при переключении панели выбора.

    И запускайте свою функцию каждый раз, когда выбор изменяется или закрывается, поскольку я считаю, что это, по сути, то, чего вы хотите достичь.

    Однако вам, возможно, придется добавить некоторую логику, чтобы ваша функция не запускалась дважды.

    13.11.2018
  • Я думал об этом, но это событие будет срабатывать каждый раз, когда панель переключается, что может быть не лучшим подходом, поскольку я хочу запускать событие только при нажатии на саму опцию, а не на поле со списком; другими словами, я буквально хочу то же самое, что и selectionChange, фактически не требуя изменения текущего выбора 13.11.2018
  • вы могли бы добавить или переместить функцию в событие (щелчок) опции mat? 13.11.2018
  • Хм, может быть, я не могу найти информацию о самом mat-option в документации; но я мог бы немного изменить свою функцию, попробую что-то в этом роде 13.11.2018
  • Если я перенесу его на событие щелчка mat-option, столбец не получит такое же изменение; кажется, что информация, которую я получаю от этого события, действительно отличается, поэтому код, который у меня сейчас есть, перестает работать должным образом. 13.11.2018
  • хммммм.. может быть, при изменении вы можете вручную установить значение на что-то другое, а затем вернуться к тому, что было изначально, чтобы вручную вызвать изменение..? 13.11.2018
  • при удаче. мне любопытно, что ты придумал 14.11.2018
  • не смог повторно вызвать событие, он просто не позволяет мне вызвать его из другого места; последнее, что я пытался, это установить значение null в конце функции, чтобы, когда я нажимаю на ту же опцию, регистрировалось «изменение», поскольку значение в этот момент должно быть нулевым, хотя не проверял его 14.11.2018
  • Обновление также не сработало, при этом удаляется все из поля со списком, поэтому оно отображается в виде строки, которую я не могу щелкнуть или что-то в этом роде, если бы не только ее функциональность, эстетически это выглядит ужасно :( 15.11.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..