Я работаю над требованием, в котором я использую множественный выбор PrimeNG. Этот множественный выбор имеет флажки, за которыми следуют тексты. Я хочу отключить выбор строки и разрешить только флажки для этих строк. Ниже приведен пример: Scenerio объясняется скриншотом:
Если я нажму на текст «1 текст», «2 текст» и т. д., значения будут выбраны, но я хочу отключить этот выбор и разрешить только выбор флажка.
Вот пример stackblitz для справки: Демо Stackblitz нажмите здесь.
Следующий код, который я использовал в своем компоненте html:
<p-multiSelect [options] = "items" defaultLabel = "Select items" [showHeader] = "false" </p-multiSelect>
Код для элементов в массиве, используемом в раскрывающемся списке:
items: SelectItem[] = [
{ value: 1, label: '1 text' },
{ value: 2, label: '2 text ' },
{ value: 3, label: '3 text' },
];
}
Проверьте эту ссылку Stackblitz
РЕШЕНИЕ 1:
Поскольку этот выбор является поведением по умолчанию для primeNg multiSelect, поэтому с помощью эмиттера события onChange
p-multiSelect я удаляю добавленное значение или добавляю удаленное значение при отмене выбора.
РЕШЕНИЕ 2:
Используя event.stopPropagation()
, но это работает, только если я нажимаю метку, но щелкая строку по-прежнему выбираю/отменяю выбор значения.
Добавлен Stackblitz
ты рокстар!! ваши решения идеальны, большое спасибо за драгоценное время и помощь мне, я поднял еще один вопрос, чтобы решить эту проблему, если вы можете ответить на тот же вопрос, я также могу дать вам голосование там. Ссылка: stackoverflow.com/questions/65284562/…
Спасибо за предоставленное решение, я должен сказать, что оно было очень описательным и хорошо сработало в моем случае. Мне нужна расширенная поддержка для моего требования, было бы полезно, если бы вы могли помочь мне в этом, следующий сценарий: у меня есть значок для каждого значения в множественном выборе, когда я нажимаю на него, он отображает всплывающее окно, проблема в том, что когда я нажимаю «ОК» всплывающее окно раскрывающегося списка множественного выбора закрывается, я не хочу его закрывать, есть ли способ найти решение, создан пример stackblitz: нажмите здесь