Как получить DataTable для выбора / выделения из ВНЕШНЕГО ВЫБОРА, не устанавливая фокус на датируемые? - PullRequest
Новая
       59

Как получить DataTable для выбора / выделения из ВНЕШНЕГО ВЫБОРА, не устанавливая фокус на датируемые?

0 голосов
/ 09 марта 2020

Это не повторяющийся пост, как я посмотрел, и не могу найти ничего с изменениями внешнего статуса. Я включал и выключал эту топи c в поисках нескольких дней.

Я делаю следующее:

У меня есть DataTable и Map на моем UI , В DataTable перечислены точки данных, которые находятся на карте.

Я могу выбрать и выбрать несколько объектов в DataTable, который выделяет строку в таблице данных и взаимодействует с картой, а также хорошо отображает выделенные точки данных. Проблема, с которой я столкнулся, заключается в том, что когда я использую карту для выбора DataTable, она не отражает выбранную строку, которая соответствует этой точке данных на карте, пока я не наведу курсор мыши на DataTable, который, как я предполагаю, в фоновом режиме вызывает какой-то вид refre sh. Мне не нужно ничего щелкать или делать что-либо в DataTable, он просто автоматически запускается, а затем показывает все точки, которые я выбрал на своей карте.

Переменная, к которой привязывается страница html [selected] вызывается правильно и его значение устанавливается, оно просто не отражает блики на строках, пока мышь не войдет в область DataTable. Мне не нужно ничего щелкать или делать что-либо, чтобы оно срабатывало, оно просто делает это самостоятельно, как только мышь входит в область.

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

this.tableRef.selected = this.newRowSelection;

Итак, мой вопрос КАК ПОЛУЧИТЬ DataTable для автоматического отображения при выборе внешнего выбора?

Я не хочу отбрасывать таблицу и перерисовывать DataTable, так как считаю, что он не создаст хороший UX.

Ценю любой и весь вклад в это.

=== ================================================== ==

Обновление: ср. 3/11/2020

Поэтому после дополнительных испытаний и отладки я могу подтвердить, что я определенно устанавливаю значение datatable.selected для [] строк, которые должны быть selected.

Однако снова строки не выделяются до тех пор, пока я не наведу курсор на таблицу данных.

У всех есть какие-либо предложения о том, как сделать так, чтобы дата данных просто выделялась автоматически. ?

=========== ============================================

1 Ответ

1 голос
/ 14 марта 2020

Трудно сказать наверняка без воспроизводимого примера, но я думаю, что это потому, что вы обновляете свойство вне области действия angular ', вероятно, в результате щелчка на карте, которая не привязана, angular way.

Вы можете прочитать об обнаружении изменений здесь . По сути, angular запускает обнаружение изменений для всех компонентов, о которых он знает, в событиях браузера (щелчок мыши, наведение мыши, ключевые события ...), вызовы ajax и setTimeout и setTimeout.

Если вы обновите какое-либо свойство компонента, не зная его angular (например, связав клик с вашей картой без использования обработчика кликов n angular), angular (и ваша таблица данных) не узнают об этом и не будет refre sh до следующего обнаружения изменений (которое является указателем мыши для таблицы данных)

Так что если вы делаете такие изменения за пределами angular, вам нужно указать angular чтобы снова запустить обнаружение изменений, используя один из 2 способов ниже.

Оберните ваши изменения в setTimeout

setTimeout(()=> this.tableRef.selected = this.newRowSelection);

Это вызовет обнаружение изменений для все приложение

Уведомление angular о явном повторном запуске обнаружения изменений 

import {ChangeDetectorRef} from '@angular/core';
constructor(private cdr: ChangeDetectorRef) {}
//....
this.tableRef.selected = this.newRowSelection;
this.cdr.detectChanges();

Обратите внимание, что это будет применяться только к компоненту (и дочерним элементам), к которому вы обращаетесь этот метод из. Так что, если ваша карта и таблица данных находятся в одном компоненте, это должно сработать сразу. В противном случае вы можете передать какое-либо событие из компонента карты в компонент, содержащий таблицу, чтобы узнать, когда вызывать этот метод.

Вы также можете напрямую выполнить свое действие в зоне angular

* 1029. *
...