Я хочу создать функцию редактирования встроенной таблицы, чтобы при нажатии на поле вы могли редактировать его, а когда вы щелкали за пределами таблицы, редактирование завершалось.
Я использую мат-выберите элемент для создания множественного выделения:
<mat-form-field id="selectAndOptionsContainer" class="form-element">
<mat-select id="selectContainer" [(ngModel)]="Obj['index']"
placeholder="Select Indices" multiple>
<mat-option *ngFor="let index of indices"
[value]="index">{{index}}</mat-option>
</mat-select>
</mat-form-field>
Я использую декоратор HostListener в угловом формате, например так:
public onClick(targetElement){
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
console.log(`clicked OUtside`);
}
}
Этот хост-список находится в файле Componentet TS, где связанный HTML-файл включает в себявся таблица и выделенная часть в ней.
Когда я щелкаю по строкам таблицы, событие не запускается.
Когда я нажимаю на элемент вне моей таблицы - событие не вызывается.
Когда я нажимаю на раздел «выбрать» (который после отображения списка опций) - событие не запускается.
Когда я нажимаю на опции в списке опций - событие
Почему элемент HTML "option" регистрируется как находящийся снаружи?
Я проверил исходный код, и кажется, что элементы option не отображаются перед нажатием кнопки "se"элемент lect ", и это может быть причиной проблемы.
Есть ли способ заставить элемент options появляться в DOM до нажатия кнопки select, но все еще быть скрытым?
КогдаЯ использую HTML множественный выбор по умолчанию, при выборе опций событие щелчка не срабатывает.